Question

我是D3的新手，我想知道是否有办法将形状的笔划类型更改为条件语句的虚线？如何定位特定的圆圈并为其添加新样式？

var num = stageLevelUntrimmed;

if (num == "Stage 1") {
    num = "1";
    .style("stroke-dasharray", ("10,3")) // make the stroke dashed
} else {
    num = "4";
}

g.append("svg:circle")
    .attr("r", "250")
    .attr("cx", cfg.w / 2)
    .attr("cy", cfg.h / 2)
    .style("fill", ellipsefillOne) 
    .style("stroke", "#FAAF3A")
    .style("stroke-opacity", "0.75")
    .style("stroke-width", "3.5px");

如果满足条件1，这是我要添加的样式：

.style("stroke-dasharray", ("10,3")) // make the stroke dashed

Answer 1

你有绑定它的数据模型吗？也许与cfg对象？

我会在数据模型中添加您需要的值，然后在迭代使用d3来设置attr。我觉得你错过了一些可以帮助我更好地理解你的问题的代码。

这是一名工作人员enter link description here

var my_data = [
  {"w":50, "h":50, "num":"Stage 1"},
  {"w":100, "h":100, "num":"Stage 2"},
  {"w":140, "h":200, "num":"Stage 3"},
  {"w":150, "h":300, "num":"Stage 4"}];

var svg = d3.select("#mysvg").append("svg")
            .attr("width", 500)
            .attr("height", 400);


var circles =  svg.selectAll("circle")
                  .data(my_data)      // iterate through the data object 'my_data'
                  .enter()
                  .append("circle")
                  .attr("r", "25")
                  .attr("cx", function(d){ return d.w / 2.0; } ) // get this components 'w'
                  .attr("cy", function(d){ return d.h / 2.0; } ) //      'h'
                  .style("fill", function(d){ return "red"; } )
                  .style("stroke", "#FAAF3A")
                  .style("stroke-opacity", "0.75")
                  .style("stroke-width", "3.5px")
                  .style("stroke-dasharray", function(d){ 
                    // set the dasharray if condition null means no attr
                    if (d.num === "Stage 1"){
                      return ("10,3") 
                    } 
                    return null;
                  }) ;

Answer 2

您可以使用D3的npm install函数来实现您所需要的功能，但它需要您将一些数据绑定到您的元素。

例如，假设您要绘制4个圆圈，并且您希望第一个圆圈具有虚线笔划：

filter()

var svg = d3.select("svg");
var r = 40;

// Create the 4 circles with the default style.
svg.selectAll("circle")
  .data(d3.range(1, 5))    // d3.range(1, 5) produces [1, 2, 3, 4]
  .enter().append("circle")
  .attr("r", r)
  .attr("cx", function(d, i) {
    return 2 * r * (i + 1);
  })
  .attr("cy", 100);

// Select only the circle that's bound to the first element.
// Then, apply the dash style.
d3.selectAll("circle")
  .filter(function(d) { return d === 1; })
  .style("stroke-dasharray", "10,3");

circle {
  fill: yellow;
  stroke: red;
  stroke-width: 2;
}

JS Fiddle

使用条件语句将样式添加到SVG形状

2 个答案: