《D3--数据可视化实战》读书总结

d3理解

标签（空格分隔）： 未分类

---

1.绑定数据

• [x] 定义：通过循环的方式将数据绑定在dom元素上，每个数据对应一个元素，所以这个数据的值就能来设定dom元素的width，height，x，y坐标等，这就表现了数据驱动的思想，同时也是d3的精华所在。

• [x] 我们绑定的数据通过匿名函数function（d，i）来调用,数据的值就能设置dom元素的属性。

所有的标签都可以进行绑定，对rect，circle，text，我们想要数据来驱动任何元素，那么就用数据绑定该元素，通过attr（）设置x,y,width,height,fill，等属性，on()来绑定鼠标事件。

svg.selectAll("rect")
        .data(dataset)  data方法后的语句都会循环,循环次数为数据个数
        .enter()
        .append("rect")
        .attr("x",function(d,i){
   
            return xscale(i);
        })
        .attr("y",function(d){
   
            return (h-yscale(d));
        })
        .attr("height",function(d){
   
            return yscale(d);
        })
        .attr("width",xscale.rangeBand())
        .attr("fill",function(d){
   
            return "rgb(0, 0, " + Math.round(d * 10) + ")";
        })
        .on("click",function(d){
     通过on来事件绑定，记住事件绑定种类就可以了
            console.log(d);
        })
        .on("mouseover",function(){
   
            d3.select(this)
                .attr("fill","orange")
        })
        .on("mouseout",function(d){
   
            d3.select(this)
                .transition()
                .duration(250)
                .attr("fill","rgb(0,0,"+d*10+")")
        })
        .on("click",function(){
   
            sortBar();
        })

2.数轴

• [x] 数轴也是d3中的一个对象，先定义一个数轴，然后将这个数轴放到svg中，一般是放在透明g元素中。数轴在定义的时候要讲比例尺映射上去，这样当比例尺改变的时候，我们只要call（）一次就好了，在svg对象上，通过call（）方法来调用数轴
• [x] 在事件监听器后，重新更新数轴，要放到最后

/*坐标轴声生成*/
    var xaxis=d3.svg.axis()
                .scale(xscale)
                .orient("buttom")
                .ticks(10)
                // .tickFormat(formator);
    var yaxis=d3.svg.axis()
                .scale(yscale)
                .orient("left")
                .ticks(10);
    /*g是group的意思，跟html中div作用一样*/
    svg.append("g")
        .attr("class","x axis")
        .attr("transform", "translate(0," + (h - padding) + ")")
        .call(xaxis);
    svg.append("g")
        .attr("class","y axis")
        .attr("transform","translate("+(padding)+",0)")
        .call(yaxis);   

• [x] 给坐标轴添加css属性
  坐标轴本身是由path，line，text元素组成的，所以我们可以添加类的方式来设定css属性样式，当然属性名也只能用svg中的属性名。

<style