从下拉过滤器中选择新来源时，JavaScript D3条形图数据将不会更新

Question

so I am still really new to building visualizations in D3 using JavaScript and I seem to be really stuck with this problem. 因此，我仍然对使用JavaScript在D3中构建可视化工具还真的很陌生，而且我似乎对此问题一无所知。 I have 4 csv data sets as shown below and I am trying to build a bar chart with a drop down filter that allows the user to select which data source they want to use. 我有4个csv数据集，如下所示，并且我正在尝试构建一个带有下拉过滤器的条形图，该过滤器允许用户选择他们要使用的数据源。 Ideally when the user selects either DataSet0.csv or DataSet1.csv I would like the bar chart to display the values from the 'Value1' field in the respective data sets, and when the user selects DataSet2.csv or Dataset3.csv I'd want the user to see values from the 'Value2' field in their respective data sets. 理想情况下，当用户选择DataSet0.csv或DataSet1.csv时，我希望条形图显示相应数据集中“ Value1”字段中的值，并且当用户选择DataSet2.csv或Dataset3.csv时，希望用户在各自的数据集中查看“ Value2”字段中的值。 That last part would just be a bonus though, for now I just really need to figure the filters out. 最后一部分不过是一个奖励，现在我真的需要弄清楚过滤器了。 I posted all of the code I have for this below. 我在下面发布了我拥有的所有代码。 When I run it on a web browser I can select an initial data set from the drop down menu and it works fine. 当我在网络浏览器上运行它时，我可以从下拉菜单中选择一个初始数据集，并且可以正常工作。 However, when I select another data-set from the drop down menu, it gets overlapped by the one previously existing chart. 但是，当我从下拉菜单中选择另一个数据集时，该数据集将与一个先前存在的图表重叠。 Thank you all for taking the time to help on this in advance! 谢谢大家花时间在此方面提供帮助！ It's greatly appreciated! 非常感谢！

DataSet0.csv DataSet0.csv

Letter,Value1,Value2
I,9968,8863
F,9938,9204
E,9875,8578
D,9859,9074
G,9856,9432
J,9778,9095
A,9729,8747
C,9695,8610
H,9609,8969
B,9508,9395

DataSet1.csv DataSet1.csv

Letter,Value1,Value2
I,1510,1495
E,1521,1312
C,1624,1370
H,1669,1031
A,1685,1256
D,1773,1178
J,1910,1129
B,1981,1331
F,1982,1032
G,1986,1463

DataSet2.csv DataSet2.csv

Letter,Value1,Value2
B,9516,9421
I,9537,9140
C,9772,9070
F,9527,9060
H,9747,8959
E,9992,8948
J,9576,8770
D,9748,8735
G,9963,8680
A,9557,8628

DataSet3.csv DataSet3.csv

Letter,Value1,Value2
I,1708,1016
H,1604,1096
G,1689,1106
D,1657,1115
F,1709,1131
C,1588,1221
A,1939,1309
J,1600,1332
B,1815,1344
E,1651,1478

index.html 的index.html

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<style>

.bar {
  fill: steelblue;
}

.bar:hover {
  fill: brown;
}

.axis {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

select {
  position: absolute;
  top: 10px
}

</style>
<body>
<select id="flter" name="flter" onchange="updateData(this.id)">
  <option value=""></option>
  <option value="DataSet0.csv">DataSet0</option>
  <option value="DataSet1.csv">DataSet1</option>
  <option value="DataSet2.csv">DataSet2</option>
  <option value="DataSet3.csv">DataSet3</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>

var margin = {top: 60, right: 60, bottom: 90, left: 120},
    width = 960 - margin.left - margin.right,
    height = 700 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);

var y = d3.scale.linear()
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(10, "$");

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

d3.csv(fileName, type, function(error, data) {
  if (error) throw error;

  x.domain(data.map(function(d) { return d.Letter; }));
  y.domain([(d3.min(data, function(d) { return d.Value1; }) - 50), d3.max(data, function(d) { return d.Value1; })]);

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
      .selectAll("text")
       .style("text-anchor", "end")
       .attr("dx", "-.8em")
       .attr("dy", ".15em")
       .attr("transform", "rotate(-15)" );

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Value1");

  svg.selectAll(".bar")
      .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.Letter); })
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.Value1); })
      .attr("height", function(d) { return height - y(d.Value1); });
});

function updateData(s){
    var s = document.getElementById(s);
    var fileName = s.value;
    d3.csv(fileName, type, function(error, data) {
        if (error) throw error;

        x.domain(data.map(function(d) { return d.Letter; }));
        y.domain([(d3.min(data, function(d) { return d.Value1; }) - 50), d3.max(data, function(d) { return d.Value1; })]);



        svg.append("g")
         .attr("class", "x axis")
         .attr("transform", "translate(0," + height + ")")
         .call(xAxis)
         .selectAll("text")
           .style("text-anchor", "end")
           .attr("dx", "-.8em")
           .attr("dy", ".15em")
           .attr("transform", "rotate(-15)" );

        svg.append("g")
           .attr("class", "y axis")
           .call(yAxis)
         .append("text")
           .attr("transform", "rotate(-90)")
           .attr("y", 6)
           .attr("dy", ".71em")
           .style("text-anchor", "end")
           .text("Value1");

        svg.selectAll(".bar")
           .data(data)
        .enter().append("rect")
           .attr("class", "bar")
           .attr("x", function(d) { return x(d.Letter); })
           .attr("width", x.rangeBand())
           .attr("y", function(d) { return y(d.Value1); })
           .attr("height", function(d) { return height - y(d.Value1); });
});
}

function type(d) {
  d.Value1 = +d.Value1;
  return d;
}
</script>
</body>
</html>

Answer 1

Use the general update pattern (carefully work through the three parts of the linked example and think about it for a bit. It's important if you want to understand d3)... 使用一般的更新模式（仔细研究链接示例的三个部分，并仔细考虑一下。要了解d3，这一点很重要）...

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<style>

  .bar {
    fill: steelblue;
  }

  .bar:hover {
    fill: brown;
  }

  .axis {
    font: 10px sans-serif;
  }

  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }

  .x.axis path {
    display: none;
  }

  select {
    position: absolute;
    top: 10px
  }

</style>
<body>
<select id="flter" name="flter" onchange="updateData(this.id)">
  <option value=""></option>
  <option value="DataSet0.csv">DataSet0</option>
  <option value="DataSet1.csv">DataSet1</option>
  <option value="DataSet2.csv">DataSet2</option>
  <option value="DataSet3.csv">DataSet3</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>

  var margin = {top: 60, right: 60, bottom: 90, left: 120},
    width = 960 - margin.left - margin.right,
    height = 700 - margin.top - margin.bottom,
    svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  var x = d3.scale.ordinal()
      .rangeRoundBands([0, width], .1, 0),
    xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom"),
    gX = svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")");

  var y = d3.scale.linear()
    .range([height, 0]),
    yAxis = d3.svg.axis()
      .scale(y)
      .orient("left")
      .ticks(10, "$"),
    gY = svg.append("g")
      .attr("class", "y axis");

  function updateData(s){
    var s = document.getElementById(s);

    var fileName = s.value;

    d3.csv(fileName, type, function(error, data) {
      if (error) throw error;

      x.domain(data.map(function(d) { return d.Letter; }));
      y.domain([(d3.min(data, function(d) { return d.Value1; }) - 50), d3.max(data, function(d) { return d.Value1; })]);

      gX.call(xAxis)
        .selectAll("text")
        .style("text-anchor", "end")
        .attr("dx", "-.8em")
        .attr("dy", ".15em")
        .attr("transform", "rotate(-15)" );

      gY.call(yAxis)
        // only add title once
        .selectAll(".title")
        .data(["Value1"])
        .enter().append("text").attr("class", "title")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text(function(d){
          return d
        });

      // GENERAL UPDATE PATTERN
      // UPDATE
      var bars = svg.selectAll(".bar")
        .data(data);
      // ENTER
      bars.enter().insert("rect", ".axis")
        .attr("class", "bar");
      // UPDATE+ENTER (calling enter() merges enter into update)
      bars.attr("x", function(d) { return x(d.Letter); })
        .attr("width", x.rangeBand())
        .attr("y", function(d) { return y(d.Value1); })
        .attr("height", function(d) { return height - y(d.Value1); });
      // EXIT
      bars.exit().remove();

    });
    function type(d) {
      d.Value1 = +d.Value1;
      return d;
    }
  }

</script>
</body>
</html>

从下拉过滤器中选择新来源时，JavaScript D3条形图数据将不会更新

问题描述

1 个解决方案

解决方案1
1 2015-08-18 09:13:38

从下拉过滤器中选择新来源时，JavaScript D3条形图数据将不会更新

问题描述

1 个解决方案

解决方案1 1 2015-08-18 09:13:38

解决方案1
1 2015-08-18 09:13:38