d3樹形圖根據json中傳入的數據更改顏色

我試圖根據在json中傳遞的顏色參數比例來更改顏色。d3樹形圖根據json中傳入的數據更改顏色

data.json

{ 
    "name": "country", 
    "children": [ 
     { 
      "name": "Verizona State", 
      "value": 100, 
      "color": 0.9, 
      "children": [ 
       { 
        "name": "xyz city", 
        "value": 30, 
        "color": -0.64, 
        "children": [ 
         { 
          "name": "xyz.abccity", 
          "value": 30, 
          "color": 0.3 

         } 
        ] 
       }, 
       { 
        "name": "abccity", 
        "value": 40, 
        "color": 0.4 
       } 
      ] 
     }, 
     { 
      "name": "NewJersey", 
      "value": 50, 
      "color": 0.5, 
      "children": [ 
       { 
        "name": "defcity", 
        "value": 30, 
        "color": -0.2 
       } 
      ] 
     } 
    ] 
}

的index.html

<html> 
<script src="http://d3js.org/d3.v3.min.js"></script> 

<body> 
<div id="heatmap"> 
<script> 

    var color = d3.scale.category10(); 
    var canvas = d3.select("#heatmap").append("svg") 
       .attr("width",500) 
       .attr("height",500); 

    d3.json("data.json" ,function(data){ 

     var treemap=d3.layout.treemap() 
     .size([500,500]) 
     .nodes(data); 

     console.log(treemap); 


    var cells = canvas.selectAll(".cell") 
       .style("position", "relative") 
       .data(treemap) 
       .enter() 
       .append("g") 
       .attr("class","cell") 
       .attr("stroke","#fff"); 

     cells.append("rect") 
     .attr("x" , function(d) { console.log(d); return d.x; }) 
     .attr("y", function(d) { return d.y; }) 
     .attr("width", function(d) { return d.dx; }) 
     .attr("height", function(d) { return d.dy; }) 
     .attr("fill", function(d){return d.children ? null:color(d.parent.name); }) 


     cells.append("text") 
     .attr("x",function(d) {return (d.x + d.dx)/2}) 
     .attr("y",function(d) {return (d.y + d.dy)/2}) 
     .text(function(d){ return d.children? null :d.name;}) 
    }) 
</script> 
</div> 
</body> 
</html>

我也可以通過顏色來代替JSON通過秤。我應該傳遞什麼（「填充」，）？請建議更改。

來源

2015-11-08 userRaj

您可以根據家長的顏色。但我需要做這樣的事情

var color = d3.scale.category10(); 

cells.append("rect") 
    .attr("x", function(d) { return d.x; }) 
    .attr("y", function(d) { return d.y; }) 
    .attr("width", function(d) { return d.dx; }) 
    .attr("height", function(d) { return d.dy; }) 
    .style("fill", function(d) { 
     return color(d.color); 
    });

來源

2015-11-08 10:33:23 Cyril

中通過顏色傳遞的數據，您的代碼在修改爲這種顏色後會起作用，如橙色，黃色而不是像0.6,0.4，-0.2那樣的比例。但是如果我想要比例尺而不是傳遞顏色，該怎麼辦？ – userRaj

你正在製作色標，所以你可以通過你的顏色從傑森得到一個獨特的顏色..編輯我的答案。 – Cyril

好的，謝謝你 – userRaj

您需要使用.style（），而不是.attr（）：

var cells = canvas.selectAll(".cell") 
    .style("position", "relative") 
    .data(treemap) 
    .enter() 
    .append("g") 
    .attr("class", "cell") 
    .style("stroke", "#fff"); 

cells.append("rect") 
    .attr("x", function(d) { return d.x; }) 
    .attr("y", function(d) { return d.y; }) 
    .attr("width", function(d) { return d.dx; }) 
    .attr("height", function(d) { return d.dy; }) 
    .style("fill", function(d) { 
     return d.children ? null:color(d.parent.name); 
    });

來源

2015-11-08 10:25:07

我不需要根據在json – userRaj

d3樹形圖根據json中傳入的數據更改顏色

回答

相關問題