个人中心
gpt4 book ai didi

javascript - D3 - 更新堆积条形图时遇到问题

转载 作者：行者123 更新时间：2023-12-03 06:53:01 25 4
gpt4 key购买 nike

我有一个真正简单的水平堆叠条形图，其中有 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 文件:

数据.csv

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

数据2.csv

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

数据3.csv

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

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

我在控制台中没有收到任何错误，并且它正在正确循环数据。

最佳答案

问题出在更新函数中的 d.ages 上。您基本上需要与初始绘图相同的设置。因此，我在更新函数的 d3.csv block 中添加了以下内容:

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

出于某种原因，institution 的类名称设置为 g，我将其更改为机构。另外，此时您不需要 .enter().append("rect")。最后我添加了过渡和持续时间。

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

希望这有帮助。

关于javascript - D3 - 更新堆积条形图时遇到问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37416216/

25 4 0
文章推荐： javascript - jQuery 数据表页脚总和 hh :mm:ss data type column
文章推荐： javascript - Chart.js 条形图的奇怪问题，图像散射
文章推荐： javascript - 我怎样才能通过thymeleaf th :replace?传递这个字符串
文章推荐： javascript - innerHTML 忽略 Angular ng-show
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com