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); 設置爲隱藏。