D3 - 无法更新堆积条形图

时间：2016-05-24 14:14:08

标签： javascript d3.js

我有一个真正简单的水平堆叠条形图，其中3个条形图都在相同的比例上（即每个0到100，堆叠的条形图由数字组成，组成100个）。

当尝试更新我的数据时，似乎没有任何事情发生。我无法弄清楚如何更新数据，这让我发疯了。

相关守则：

<body>
  <div id='updateTest'>
    Update Data
  </div>
  <div id='chart'></div>


  <script>
    $( document ).ready(function() {
        $( "#updateTest" ).click(function() {
            updateData();
            console.log(allData[count]);
        });
    });

    var institution;



    // Set up the SVG data
    var allData = ["data.csv","data2.csv","data3.csv"];
    var count = 0;

    var margin = {top: 20, right: 20, bottom: 145, left: 115},
        width = 960 - margin.left - margin.right,
        height = 300 - margin.top - margin.bottom;

    var y = d3.scale.ordinal()
        .rangeRoundBands([height, 0], .1);

    var x = d3.scale.linear()
        .rangeRound([0, width]);

    var color = d3.scale.ordinal()
        .range(["#98abc5", "#8a89a6", "#7b6888"]);

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");

    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom")
        .tickFormat(d3.format(".2s"));

    var svg = d3.select("#chart").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 + ")");

    // Bind initial shown data to the SVG
    d3.csv(allData[count], function(error, data) {
      if (error) throw error;

      color.domain(d3.keys(data[0]).filter(function(key) {
        return key !== "Institution";
      }));

      data.forEach(function(d) {
        var y0 = 0;
        d.ages = color.domain().map(function(name) {
          return {name: name, y0: y0, y1: y0 += +d[name]};
        });
        d.total = d.ages[d.ages.length - 1].y1;
      });

      data.sort(function(a, b) { return b.total - a.total; });

      y.domain(data.map(function(d) { return d.Institution; }));
      x.domain([0, d3.max(data, function(d) { return d.total; })]);

      svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis);

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

      institution = svg.selectAll(".institution")
          .data(data)
        .enter().append("g")
          .attr("class", "g")
          .attr("transform", function(d) {
            return "translate(0," + y(d.Institution) + ")"; });

      institution.selectAll("rect")
          .data(function(d) { return d.ages; })
        .enter().append("rect")
          .attr("height", y.rangeBand())
          .attr("x", function(d) { return x(d.y0); })
          .attr("width", function(d) { return x(d.y1) - x(d.y0); })
          .style("fill", function(d) { return color(d.name); });

      var legend = svg.selectAll(".legend")
          .data(color.domain().slice().reverse())
        .enter().append("g")
          .attr("class", "legend")
          .attr("transform", function(d, i) {
            return "translate(0," + i * 28 + ")"; });

      legend.append("rect")
        .attr("x", -20)
        .attr("y", 190)
        .attr("width", 25)
        .attr("height", 25)
        .style("fill", color);

      legend.append("text")
        .attr("x", 10)
        .attr("y", 203)
        .attr("dy", ".35em")
        .style("text-anchor", "left")
        .text(function(d) { return d; });
    });

        /* updateData()
         * Rebinds the SVG to a new dataset
         */
    function updateData() {
        // Iterate through the data
      var newData;
      if (count === allData.length - 1)
          count = 0;
      else
          count++;
      newData = allData[count];


      // Get the data again
        d3.csv(allData[count], function(error, data) {
        data.forEach(function(d) {
                d.close = +d.close;
            });

            // Make the changes
        institution.selectAll("rect")
            .data(function(d) { return d.ages; })
            .enter().append("rect")
              .attr("height", y.rangeBand())
              .attr("x", function(d) { return x(d.y0); })
              .attr("width", function(d) { return x(d.y1) - x(d.y0); })
              .style("fill", function(d) { return color(d.name); });
        });
    }

  </script>
</body>

我的CSV文件：

data.csv 

Institution,CurrentlyOweBehind,CurrentlyOweNotBehind,Paid
For-profit,15,35,50
Nonprofit,11,48,41
Public,26,16,58

data2.csv 

Institution,CurrentlyOweBehind,CurrentlyOweNotBehind,Paid
For-profit,23,33,44
Nonprofit,28,12,60
Public,12,8,80

data3.csv 

Institution,CurrentlyOweBehind,CurrentlyOweNotBehind,Paid
For-profit,61,22,17
Nonprofit,7,43,50
Public,41,19,40

主位在updateData()函数中。我能够创建图表并显示数据，但我不明白转换数据......

我在控制台中没有出错，并且正确地循环数据。

1 个答案:

答案 0 :(得分：1)

问题在于更新功能中的d.ages。您基本上需要与初始绘图相同的设置。所以我在更新函数的d3.csv块中添加了以下内容：

<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
</head>
<body>

<div class="group-content" id="Column 1">
<b>Column 1</b>
<div id= "ID_1" class="portlet">
<div class="portlet-header">Task 1</div>
<div class="portlet-content">
<b>Task Number: </b> 1
<b>Description: </b> Some description of task 1
</div>
</div>
</div>

<div class="group-content" id="Column 2">
<b>Column 2</b>
<div id="ID_4" class="portlet">
<div class="portlet-header">Task 4</div>
<div class="portlet-content">
<b>Task Number: </b> 4
<b>Description: </b> Some description of task 4
</div>
</div>
</div>

<div class="group-content" id="Column 3">
<b>Column 3</b>
<div id= "ID_7" class="portlet">
<div class="portlet-header">Task 7</div>
<div class="portlet-content">
<b>Task Number: </b> 7
<b>Description: </b>Some description of task 7
</div>
</div>
</div>
</body>

由于某种原因， data.forEach(function(d) { var y0 = 0; d.ages = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; }); d.total = d.ages[d.ages.length - 1].y1; }); institution = svg.selectAll(".institution") .data(data); 的类名设置为g，我将其更改为机构。此外，此时您不需要institution。最后，我添加了转换和持续时间。

我创建了一个plunk，其中包含了所有csv文件：http://plnkr.co/edit/CYFNWZKuiLo9gFps49e9?p=preview

希望这有帮助。

相关问题
最新问题