d3 js - 用多行更新转换 [英] d3 js - update transition with multiple lines
问题描述
几乎得到它 - y轴和两条路径更新他们应该。文本值dosen't和部分问题是选择，我选择错误的方式。
代码几乎可以正常工作：
//首先转换行&标签到新city.var t0 = level.data（dsMainArr）.transition（）。duration（750）; t0.selectAll（。line）.attr（d，function（d）{return line .values）;}）.style（stroke，function（d）{return color（d.name）;}）; var t00 = level.selectAll（'.textEnd'）.data（dsMainArr）.datum （d）{return {name：d.name，value：d.values [d.values.length -1]};}）.transition（）.duration（750）.attr {returntranslate（+ x（d.value.Datum）+，+ y（d.value.Antal）+）;}）.text（function（d）{return d.name;}） ; // then transition the y-axis.y.domain（[0，d3.max（dsMainArr，function（c）{console.log（max，d3.max（c.values，function（v）{return v.Antal;}））; return d3.max（c.values，function（v）{return v.Antal;}）;}）]; var t1 = t0.transition（）; var t11 = t00.transition （d，function（d）{return line（d.values）;}）t11.selectAll（s，t11）; t1.select .textEnd）。attr（transform，function（d）{returntranslate（+ x（d.value.Datum）+，+ y（d.value.Antal）+）;} svg.transition（）。duration（750）.transition（）。selectAll（。y.axis）。call（yAxis）;
div>
我终于得到它的工作和有意义的同时。工作jsFiddle包括。我认为这是一个很好的例子，因为我知道没有任何（可以通过谷歌）工作示例。如果我能够学习这样的东西，我可以节省几个小时...
我已经看到类似的问题，没有得到真正的，坚实的答案，这样应该希望给其他有一些指针。看起来不太漂亮，但它演示了如何使用多线图的新数据和更新数据进行转换。
也就是说， jsFiddle
和一些代码只有更新部分）。这个例子是一个新的数据项和一个被更新的数据项。
//首先转换行&标签到过滤的数据。
var t01 = svg.selectAll（。city）
.data（dsMainArr，function key（d）{return d.name;}）;
var t01Enter = t01.enter（）。append（g）
.attr（class，city）;
t01Enter.append（path）
.attr（class，line）
.attr（d，function（d）{return line d.values）;}）
.style（stroke，function（d）{return color（d.name）;}）
.transition
t01Enter.append（text）
.attr（class，textEnd）
.datum（function（d）{return {name：d.name ，value：d.values [d.values.length - 1]};}）
.attr（transform，function（d）{returntranslate（+ x（d.value.Datum）+ ，+ y（d.value.Antal）+）;}）
.attr（x，3）
.attr（dy，.35em）
.text（function（d）{return d.name;}）
.transition（）。duration（750）;
t01.exit（）。transition（）。duration（750）.remove（）;
//然后转换y轴。
y.domain（[
d3.min（dsMainArr，function（c）{return d3.min（c.values，function（v）{return v.Antal;}）;}），
d3.max（dsMainArr，function（c）{return d3.max（c.values，function（v）{return v.Antal;}）;}）]）;
var t1 = t01.transition（）;
svg.transition（）。duration（750）.transition（）。selectAll（。y.axis）。call（yAxis）;
t1.select（。line）。attr（d，function（d）{return line（d.values）;}）;
t1.select（text）。attr（transform，function（d）{var len = d.values.length; returntranslate（+ x（d.values [len-1]。 Datum）+，+ y（d.values [len-1] .Antal）+）;}）;
Almost got it - the y-axis and the two paths update as they should. The text value dosen't and part of the problem is the selection, i select the wrong way. And then it doesn't adhere to the changes in y but instead goes galloping off.
Code that almost work:
// First transition the line & label to the new city.
var t0 = level.data(dsMainArr).transition().duration(750);
t0.selectAll(".line")
.attr("d", function(d) {
return line(d.values);
})
.style("stroke", function(d) {
return color(d.name);
});
var t00 = level.selectAll('.textEnd')
.data(dsMainArr)
.datum(function(d) {
return {
name: d.name,
value: d.values[d.values.length - 1]
};
})
.transition()
.duration(750)
.attr("transform", function(d) {
return "translate(" + x(d.value.Datum) + "," + y(d.value.Antal) + ")";
})
.text(function(d) {
return d.name;
});
// Then transition the y-axis.
y.domain([0,
d3.max(dsMainArr, function(c) {
console.log("max", d3.max(c.values, function(v) {
return v.Antal;
}));
return d3.max(c.values, function(v) {
return v.Antal;
});
})
]);
var t1 = t0.transition();
var t11 = t00.transition();
console.log("sista", t11);
t1.select(".line").attr("d", function(d) {
return line(d.values);
})
t11.selectAll(".textEnd").attr("transform", function(d) {
return "translate(" + x(d.value.Datum) + "," + y(d.value.Antal) + ")";
})
svg.transition().duration(750).transition().selectAll(".y.axis").call(yAxis);
I finally got it to work and make sense at the same time. Working jsFiddle included. I think this is a good example for as far as I know there aren't any (findable by google) working examples out there. Had I been able to study something like this I might have saved hours upon hours...
I have seen similar questions without getting real, solid answers so this should hopefully give others out there some pointers. It ain't pretty to look at but it demonstrates how to do transitions with both new and updated data for a multiple-line-chart.
That said, jsFiddle
And some code (only the update part). This example is with one new data item and one that is updated.
// First transition the line & label to the filtered data.
var t01 = svg.selectAll(".city")
.data(dsMainArr,function key(d) {return d.name;});
var t01Enter = t01.enter().append("g")
.attr("class", "city");
t01Enter.append("path")
.attr("class", "line")
.attr("d", function(d) {return line(d.values); })
.style("stroke", function(d) { return color(d.name); })
.transition().duration(750);
t01Enter.append("text")
.attr("class", "textEnd")
.datum(function(d) {return {name: d.name, value: d.values[d.values.length - 1]}; })
.attr("transform", function(d) { return "translate(" + x(d.value.Datum) + "," + y(d.value.Antal) + ")"; })
.attr("x", 3)
.attr("dy", ".35em")
.text(function(d) { return d.name; })
.transition().duration(750);
t01.exit().transition().duration(750).remove();
// Then transition the y-axis.
y.domain([
d3.min(dsMainArr, function(c) { return d3.min(c.values, function(v) { return v.Antal; }); }),
d3.max(dsMainArr, function(c) { return d3.max(c.values, function(v) { return v.Antal; }); })]);
var t1 = t01.transition();
svg.transition().duration(750).transition().selectAll(".y.axis").call(yAxis);
t1.select(".line").attr("d", function(d) {return line(d.values); });
t1.select("text").attr("transform", function(d) {var len = d.values.length;return "translate(" + x(d.values[len-1].Datum) + "," + y(d.values[len-1].Antal) + ")";});
这篇关于d3 js - 用多行更新转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
