можно покрасить группы по-разному

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

Ive сделали это за фокус, оставить его до вас, чтобы сделать контекстную :)

Изменено скрипку: http://fiddle.jshell.net/zua7L31d/6/

Закончено и их:

Добавлено новый прямоугольник для «контекста»

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/

Надеюсь, что помогло :)