d3.js多种类型的盒子

我试图用不同的颜色数据集的每个名称（例如fixed_asset为蓝色，current_asset为红色），绘制rects但只有一种类型的盒与下面的代码绘制。

任何建议是值得欢迎的。

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"];});

来源

2016-01-24 saku

当调用此：

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

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

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

在这里，您不需要重新绑定数据。只要保持在输入选择的参考和后置两个rects：

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script data-require="[email protected]" 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>

来源

2016-01-24 14:48:57 Mark

非常感谢！代码适用于您的指示，并感谢您的详细解释。 – saku

d3.js多种类型的盒子

回答

相关问题