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多種類型的盒子

回答

相關問題