Question

我遇到了D3.js的麻烦。

我尝试为每个数据集名称绘制不同颜色的rects （例如，blue_asset为蓝色，current_asset为红色），但是只使用以下代码绘制了一种类型的框。

欢迎提出任何建议。

    var dataset = [
    {  
       "fixed_asset":100,
       "current_asset":150,
       "equity":50,
       "long-term_liabilities":100,
       "short-term_liabilities":150,
       "revenue":400,
       "operating_income":150,
       "ebit":100,
       "ebt":50,
       "net_income":35
    },
    {  
       "fixed_asset":100,
       "current_asset":150,
       "equity":50,
       "long-term_liabilities":100,
       "short-term_liabilities":150,
       "revenue":400,
       "operating_income":150,
       "ebit":100,
       "ebt":50,
       "net_income":35
    }            
    ];

    var w = 400;
    var h = 300;

    var svg = d3.select("body")
                .append("svg")
                  .attr("width", w)
                  .attr("height", h);

    var padding_left = 20;
    var padding_bottom = 30;

    svg.selectAll("rect")
       .data(dataset)
       .enter()
       .append("rect")
       .attr("fill", "blue")
       .attr("x", function(d, i){return i * 100 + padding_left;})
       .attr("y", function(d){return h - padding_bottom - d["fixed_asset"];})
       .attr("width", 20)
       .attr("height", function(d){return d["fixed_asset"];});

    svg.selectAll("rect")
       .data(dataset)
       .enter()
       .append("rect")
       .attr("fill", "red")
       .attr("x", function(d, i){return i * 100 + padding_left;})
       .attr("y", function(d){return h - padding_bottom - d["fixed_asset"] - d["current_asset"];})
       .attr("width", 20)
       .attr("height", function(d){return d["current_asset"];});

Answer 1

当你这样称呼时：

svg.selectAll("rect")
   .data(dataset)
   .enter()
   .append("rect")
   ...

svg.selectAll("rect")
   .data(dataset)
   .enter()
   .append("rect")
   ...

您正在重新绑定数据并计算输入选择两次。第一个块是有效的，因为数据是新的（它被输入），第二个块不起作用，因为它是相同的数据（没有输入）。

您根本不需要重新绑定数据。只需保留对输入选择的引用并附加两个rects：

＆＃13;

<!DOCTYPE html>
<html>

  <head>
    <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
  </head>

  <body>
    <script>
       var dataset = [
    {  
       "fixed_asset":100,
       "current_asset":150,
       "equity":50,
       "long-term_liabilities":100,
       "short-term_liabilities":150,
       "revenue":400,
       "operating_income":150,
       "ebit":100,
       "ebt":50,
       "net_income":35
    },
    {  
       "fixed_asset":100,
       "current_asset":150,
       "equity":50,
       "long-term_liabilities":100,
       "short-term_liabilities":150,
       "revenue":400,
       "operating_income":150,
       "ebit":100,
       "ebt":50,
       "net_income":35
    }            
    ];

    var w = 400;
    var h = 300;

    var svg = d3.select("body")
                .append("svg")
                  .attr("width", w)
                  .attr("height", h);

    var padding_left = 20;
    var padding_bottom = 30;

    // keep reference to enter selection
    var eS = svg.selectAll("rect")
       .data(dataset)
       .enter();
    
    // first rect
    eS
       .append("rect")
       .attr("fill", "blue")
       .attr("x", function(d, i){return i * 100 + padding_left;})
       .attr("y", function(d){return h - padding_bottom - d["fixed_asset"];})
       .attr("width", 20)
       .attr("height", function(d){return d["fixed_asset"];});
    
    // second rect
    eS
       .append("rect")
       .attr("fill", "red")
       .attr("x", function(d, i){return i * 100 + padding_left;})
       .attr("y", function(d){return h - padding_bottom - d["fixed_asset"] - d["current_asset"];})
       .attr("width", 20)
       .attr("height", function(d){return d["current_asset"];});
      
    </script>
  </body>

</html>

＆＃13;

d3.js多种类型的盒子

1 个答案: