d3 - как создать многоцветную рамку

Мне нужны разные цвета для рамки для проекта d3. Вот мой код границы, который работает:d3 - как создать многоцветную рамку

 //Create a Border 
    d3.select("svg").append("rect") 
     .attr("x",0) 
     .attr("y",0) 
     .attr("width", width) 
     .attr("height", height) 
     .attr("style","fill-opacity:0; stroke:black;stroke-width:2px");

Мне нужно добавить красный и зеленый цвет и не могу понять, как это сделать?

источник

2014-01-21 teddy

Вы хотите окрасить разные стороны (границы) прямоугольника разными цветами? Я не думаю, что svg: rect допускает эту возможность. Если вы нарисуете четыре отдельные строки, образующие прямоугольник? Затем вы можете назначить каждой строке отдельный цвет. Но это может быть не то, о чем вы просите ... вопрос не очень ясен, по крайней мере для меня. – FernOfTheAndes

Это то, что я хочу сделать: http://jsfiddle.net/9877/amp55/ – teddy

Если вам нужна разноцветная рамка, например, из эффекта теневой тени с прямоугольниками SVG, вам нужно будет создать несколько прямоугольников, по одному для каждого цвет. Каждый прямоугольник имеет только один цвет хода. Однако, если вы хотите, чтобы граница была вокруг всего SVG, вы можете использовать эффекты границы HTML/CSS для SVG в целом (просто не на фигурах внутри него). – AmeliaBR

Я отправляю это предварительно, потому что я не знаю вашего уровня знакомства с D3. Итак, вот минимальный скелет, что я жестко закодирован для целесообразности, но может быть легко сгенерирован автоматически с известной высотой, смещением и т.д.

data = [ 
    {x:0, y:0, w: 110, h:100, color:"green"}, 
    {x:10, y:10, w: 90, h:80, color:"red"}, 
    {x:20, y:20, w: 70, h:60, color:"yellow"} 
]; 
d3.select("svg").selectAll("rect") 
    .data(data) 
    .enter() 
    .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.w;}) 
    .attr("height",function(d) {return d.h;}) 
    .attr("style",function(d) {return "fill-opacity:0; stroke:" + d.color + ";stroke-width:2px";});

источник

2014-01-21 02:39:10 FernOfTheAndes

-1

вы можете использовать d3.scale.ordinal(), и вы можете специфический цвет d3.scale.ordinal(). диапазон ([ "зеленый", "красный", "синий"]), если вы хотите использовать случайный цвет d3.scale.category10()

DEMO

var data = [ 
     {x:0, y:0, w: 110, h:100}, 
     {x:10, y:10, w: 90, h:80}, 
     {x:20, y:20, w: 70, h:60} 
    ]; 
    var color = d3.scale.ordinal().range(["green", "red","blue"]); 
    d3.select("body").append("svg").selectAll("rect") 
     .data(data) 
     .enter() 
     .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.w;}) 
     .attr("height",function(d) {return d.h;}) 
     .attr("style",function(d,i) { return "fill-opacity:0; stroke:" + color(i) + ";stroke-width:2px";});

источник

2014-01-21 07:12:46 Manoj

d3 - как создать многоцветную рамку

ответ

Смежные вопросы