Question

我目前正尝试将两张图组合成一个视图。我的第二个图表，如果您使用滑块，条形图将更新数据。当你向前滑动时，它可以正常工作，但是当你向后滑动它时它不会重绘图表。当我单独在条形图上工作时，它完全正常工作，似乎当我将它与线图结合起来时，它只能部分工作。

我试图找到问题的原因，我认为这段代码有问题。如果我将其评论出来，条形图会正确重绘。

var chart1 = d3.select("body").append("svg")
.attr("width", chart1_width + chart1_margin.left + chart1_margin.right)
.attr("height", chart1_height + chart1_margin.top + chart1_margin.bottom)
.append("g")
.attr("transform", "translate(" + chart1_margin.left + "," + chart1_margin.top + ")");

链接到我的小提琴：http://jsfiddle.net/flyingburrito/a8fym1ma/3/

谢谢！

Answer 1

我将条形图移到了顶部，这使它工作正常。一个简单的解决方案就是保持这样。

更好的解决方案是分析发生这种情况的原因。对于D3，当事情发生时，它通常会出现在您的选择中。这是你的问题

    d3.select("#sexYear").on("input", function () {
    debugger;
    d3.select("svg").selectAll("rect").remove();
    update(this.value);        
});

您正在选择＆＃39; svg＆＃39;选择第一个svg是折线图，而不是条形图。这是因为＆＃39; d3.select＆＃39;选择被调用的第一个。我所做的是添加一个名为＆＃39; barchart＆＃39;到条形图，然后我选择条形图

var chart2 = d3.select("body").append("svg")
.attr('class','barchart')

和

d3.select("#sexYear").on("input", function () {
    debugger;
    d3.select(".barchart").selectAll("rect").remove();
    update(this.value);

fiddle

图表没有正确重绘

1 个答案: