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中传入的数据更改颜色

回答

相关问题