d3.JS 笔记

1. 创建对象
   let objname = svg.append(‘text’) //创建text对象
   .attr(‘x’, w / 2 + 395) //设置x坐标
   .attr(‘y’, 160) //设置y坐标
   .attr(‘class’, ‘showlabel’) //设置css样式
   .text(’·show’) //设置display
   .on(‘click’, triggerTransition.bind(this)); //绑定点击事件
   绑定事件的另一种写法
   .on(‘click’, function(d) {
   d3.select(this).style(“stroke-width”,“1.2”);
   div.transition()
   .duration(200)
   .style(“opacity”, 0);
   }); //绑定点击事件

常用鼠标点击事件

1. mouseout 鼠标移出
2. mouseover 鼠标悬停
3. click 鼠标点击
   用法 都是对象名.on(‘click’)

另外绑定点击事件后 要获取操作自身
需要通过 d3.select(this).xxx

常用绑定html 样式

如果 你的数据对象要用html 修饰, 那么可以通过 数据对象.html
div.html(":" + d[0].toString() + "
: “+ d[1].toString()+ “
”
+ " :” + zero(d[0]/d[1]) + “
”)
.style(“left”, (d3.event.pageX + 20) + “px”)
.style(“top”, (d3.event.pageY - 18) + “px”);
})

另外一些常用的绑定css 样式有

.attr(“height”, h); //高度
.attr(“width”, w); //宽度
.style(“opacity”, 0);//透明度
.attr(“stroke”, “red”)//线条的颜色
.attr(“stroke-width”, 1.2) //线条的宽度

字体颜色

svg.append(‘text’)
.attr(‘x’, w / 2 + 395) //x坐标
.attr(‘y’, 140) //y坐标
.attr(‘class’, ‘optlabel’) //绑定css样式

.optlabel{
font-size: 1em; //字体大小
fill: rgb(67,151,127) ; //字体颜色
}

对象.transition()
.duration(100) //动画持续时间
.style(“opacity”, .8) //设置透明度
.style(“border-style”, “dotted”); //设置边框样式

如果 我们 要对 上面的对象 进行操作只要
对象名.属性 比如 .attr(“opacity”,0); 设置为隐藏。