图形未正确重绘

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 + ")");

Link 我的 fiddle: http://jsfiddle.net/flyingburrito/a8fym1ma/3/

谢谢！

Answer 1

我将条形图移到顶部，使其工作正常。一个简单的解决方案是保持这种状态。

更好的解决方案是分析为什么会发生这种情况。对于 D3，当发生这种情况时，它通常会出现在您的 select 中。那是你的问题

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

您正在 selecting 'svg'，其中 select 是第一个 svg，它是折线图，而不是条形图。这是因为 'd3.select' select 是被调用的第一个。我所做的是在条形图中添加一个名为 'barchart' 的 class，然后我 select 这样的条形图

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

图形未正确重绘

Graph not redrawing properly

d3.js