Question

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

我需要添加红色和绿色，无法弄清楚它是如何做到的？

Answer 1

我暂时发布这个帖子是因为我不知道你对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";});

Answer 2

您可以使用 d3.scale.ordinal() ，然后您可以指定颜色 d3.scale.ordinal（）。range（[“green”，“red”，“blue”]），如果你想随意使用颜色 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";});

d3 - 如何创建多色边框

2 个答案: