是否可以用不同的颜色组

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

要解决此问题，您需要将 'rect' 附加到您的 SVG 并填充它，因为您不能只填充 'g'。因此，创建一个矩形，然后将焦点附加到该矩形。与上下文相同:)

//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 + ")");

我做的是为了专注，留给你做上下文:)

已更新 fiddle：http://fiddle.jshell.net/zua7L31d/6/

完成它们：

为 'context'

添加了一个新矩形

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

最终 fiddle : http://fiddle.jshell.net/zua7L31d/7/

希望对您有所帮助:)

是否可以用不同的颜色组

is it possible to color groups differently

d3.js

nvd3.js