Question

我计划在每个元素中使用不同的颜色。我只是在探索是否可能。

我的代码：

var svg = d3.select("#graphid").append("svg")
    .style("margin-left","30px")
    //.style("background-color","lavender")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom);

var focus = svg.append("g")
    .attr("class", "focus")
    .attr("id","focusid")
     .style("background-color","#F8FCFB")
    //.call(zoom)
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

   var fo= d3.select("#focusid").style("background-color","azure");
    console.log(fo);

var context = svg.append("g")
    .attr("id","contextid")
    .attr("class", "context")
    .attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");


    var contx= d3.select("#contextid").style("background-color","lavender");   

 ............../
 ..............//
 .............///

小组没有得到颜色设置？我在这里缺少什么？

Answer 1

要解决此问题，您需要附加一个＆＃39; rect＆＃39;给你SVG并填写，尽可能只是填补＆＃39;。因此，创建一个矩形，然后将焦点附加到该矩形。与上下文相同：）

//create the rectangle to fill here 
var rect = svg.append('rect')
.attr('id', 'rect')
.style('fill', 'red')
.attr("height", height)
         .attr("width", width);

var focus = svg.append("g")
    .attr("class", "focus")
    .attr("id","focusid")
    //.call(zoom)

    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

我完成了焦点，让你做上下文:)

更新了小提琴：http://fiddle.jshell.net/zua7L31d/6/

关闭它们：

为＆＃39;上下文＆＃39;

添加了一个新矩形

var contextRect = svg.append('rect')
.attr('id', 'rect2')
//.style('fill', 'red')
.attr("height", rect2Height)
         .attr("width", rect1Width)
.attr('x', 0)
.attr('y', rect1Height)
;

最后的小提琴：http://fiddle.jshell.net/zua7L31d/7/

希望有所帮助：）

是否有可能以不同方式对组进行着色

1 个答案: