d3入门二-常用 方法

 

CSV

版本6.5.0

这里的data实际上是csv中的一行数据

 d3.csv("static/data/dept_cpu.csv",function (data) {
        console.log(data);
    });

 

去除html页面中GET《 http://localhost:8080/favicon.ico 404 (Not Found)》

 <link rel="shortcut icon" href="#" />

 

过度

位于数据集设置之后，属性设置之前

.data(dataset)
.transition()
.attr("y",function (d)

 

Input取值

+表示将字符串数字强制转换为数字，attr的方式可能取不出来值

var threshold = +d3.select(this).node().value;

 

取值

d3.min(iterable[,accessor])
根据顺序返回可迭代对象中的最小值，如果没有可以比较的值，返回undefined. 可选访问函数等价于调用Array.from(Array.from用法，将类似于数组的对象转化为数组，要求该对象有length属性)。

和Math.min不同，该方法会会忽略undefined,null,NaN值，这对处理missing data有用, 此外，元素比较顺序依赖字符串顺序而不是数字顺序，比如，["20","3"]按照字符串顺序最小值为“20”，[20,3]按照数字顺序最小值为3。

d3.extent(iterable[, accessor])
该方法返回[最小值，最大值]，没有可比较元素返回[undefined,undefined]。这在填写domain时经常用到

d3.sum(iterable[, accessor])
返回可迭代元素和，如果没有元素返回0。该方法忽略undefine，NaN

d3.mean(iterable[, accessor])
返回平均值，忽略undefine，NaN。

 

坐标轴文字的旋转

svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + (h - margin.bottom) + ")")
        .call(xAxis)
        .selectAll("text")
        .attr("dy", ".55em")
        .attr("transform", "rotate(60)")
        .style("text-anchor", "start");

主要是

attr("transform", "rotate(60)")