如果这个问题看起来很愚蠢,我很抱歉,但它困扰了我几天,所以我非常感谢任何人提供的任何简单输入! :) 我正在尝试在 d3.js 中构建一个在不同数据集之间转换的折线图。但是,每当我点击转换函数时,它都会选择图形上的原始线和图形的轴,并转换所有这些。我尝试执行 selectAll("svg:path") 而不是 selectAll("path"),但它只返回 DOMException 12,表明选择不存在。
//beginning of code to append axis to graph
graph.append("svg:g").attr("class", "x axis")
//draws the original line on the graph
graph.append("svg:path").attr("d", line(dataset1));
//line function
var line = d3.svg.line()
.x(function(d) {return x(d.age);})
.y(function(d) {return y(d.freq);})
.interpolate("basis");
//transition function
function transition(newData) {
graph.selectAll("path")
.data(newData)
.transition()
.duration(2000)
.attr("d", line(newData));
}
感谢您的任何回复! :)
最佳答案
只要给你想要改变的东西一个独特的类/标识符,例如
graph.append("svg:path").attr("d", line(dataset1)).classed("line", true);
...
graph.selectAll("path.line")
.data(newData)
...
关于d3.js 中的过渡线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11001467/