CODEWITHSUNDEEP
javascriptcssd3.js
marcos
marcos

Reputation: 121

Adding style to SVG shape with a conditional statement

I'm new to D3 and I was wondering if there is a way to change the stroke type of a shape to dashed with a conditional statement? How do I target a specific circle and add a new style to it?

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

This is the style that I want to add if condition one is met: 

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

Upvotes: 0

Views: 3606

Answers (2)

icanc
icanc

Reputation: 3587

You can use D3's filter() function to achieve what you're looking for, but it requires that you to bind some data to your elements.

For example, say you want to draw 4 circles and you want the first circle to have a dashed stroke:

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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg height="300" width="500"></svg>

JS Fiddle

Upvotes: 0

corn3lius
corn3lius

Reputation: 5005

Do you have a data model you are binding this to ? perhaps with the cfg object?

I would add the value you needed in the data model then as you iterate through use d3 to set the attr. I feel you are missing some code that might help me understand your problem more.

Heres a working plunker 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;
                  }) ;

Upvotes: 1

Related Questions