title: If condition for .attr("stroke-dasharray", function (d) (...)} d3.js
body: <p>I am trying to implement stroke-dasharray for one line usinf if-else condition. But It's not working. Can someone have a look at it and tell what is wrong here ?</p>
  <pre><code>    .attr(&quot;stroke-dasharray&quot;, function (d) {
        if (d.type != &quot;Step&quot;) return ('3, 3');
        else
        return null;
      })
      
  </code></pre>
  <p>I want to make the red line in solid and other in dashed.
  <img src="https://i.stack.imgur.com/9T3rp.png" alt="Image" /></p>
  <p>Following is the data of red line of one point. Only the red line has &quot;type&quot;: &quot;Step&quot;.</p>
  <pre><code>{
  &quot;status&quot;: 1,
  &quot;resource_name&quot;: &quot;Step 1&quot;,
  &quot;type&quot;: &quot;Step&quot;,
  &quot;ld&quot;: [0, 0],
  &quot;pathway_name&quot;: &quot;pathway1&quot;
   },
  </code></pre>
  <p>I saw this <a href="https://stackoverflow.com/questions/57994199/d3-conditional-styling-of-edges">answer</a> and tried to implement like this. But I am not getting desired result.
  <br />
  What I am not able to do right here ?</p>
  <p>That's the full code:</p>
  <pre><code>document.getElementById(&quot;Pathway&quot;).addEventListener(&quot;click&quot;, function () {
    document.getElementById(&quot;my_dataviz&quot;).innerHTML = &quot;&quot;;
  
    // dimensions and margins
    var margin = {
      top: 50,
      right: 30,
      bottom: 30,
      left: 210,
    };
    var svg = d3.select(&quot;svg&quot;),
      width = 1410 - margin.left - margin.right,
      height = 620 - margin.top - margin.bottom;
  
    // create a clipping region
    svg
      .append(&quot;defs&quot;)
      .append(&quot;clipPath&quot;)
      .attr(&quot;id&quot;, &quot;clip&quot;)
      .append(&quot;rect&quot;)
      .attr(&quot;width&quot;, width)
      .attr(&quot;height&quot;, height);
  
    d3.json(&quot;JSON_files/SDG_pathway.json&quot;).then(function (data1) {                      // Change file name here
      var groupData = d3.group(data1, (d) =&gt; d.pathway_name);
  
      var xScale = d3.scaleLinear().domain([0, 1]).range([0, width]);
      var yScale = d3.scaleLinear().domain([0, 1]).range([height, 0]);
  
      var xAxis = d3.axisBottom(xScale).ticks(0).tickSize(-height);
      var yAxis = d3.axisLeft(yScale).ticks(0).tickSize(-width);
  
      var gX = svg
        .append(&quot;g&quot;)
        .attr(
          &quot;transform&quot;,
          &quot;translate(&quot; + margin.left + &quot;,&quot; + (margin.top + height) + &quot;)&quot;
        )
        .call(xAxis);
  
      var gY = svg
        .append(&quot;g&quot;)
        .attr(&quot;transform&quot;, &quot;translate(&quot; + margin.left + &quot;,&quot; + margin.top + &quot;)&quot;)
        .call(yAxis);
  
      var focus = svg
        .append(&quot;g&quot;)
        .attr(&quot;transform&quot;, &quot;translate(&quot; + margin.left + &quot;,&quot; + margin.top + &quot;)&quot;)
        .attr(&quot;class&quot;, &quot;line&quot;)
        .attr(&quot;clip-path&quot;, &quot;url(#clip)&quot;);
  
      const color = d3
        .scaleOrdinal()
        .range([&quot;#e41a1c&quot;, &quot;#A0A0A0&quot;, &quot;#4daf4a&quot;, &quot;#984ea3&quot;]);
  
      var points_g = svg
        .append(&quot;g&quot;)
        .attr(&quot;transform&quot;, &quot;translate(&quot; + margin.left + &quot;,&quot; + margin.top + &quot;)&quot;)
        .attr(&quot;clip-path&quot;, &quot;url(#clip)&quot;)
        .classed(&quot;points_g&quot;, true);
  
      var label = svg
        .append(&quot;g&quot;)
        .attr(&quot;transform&quot;, &quot;translate(&quot; + margin.left + &quot;,&quot; + margin.top + &quot;)&quot;)
        .attr(&quot;class&quot;, &quot;label&quot;)
        .attr(&quot;clip-path&quot;, &quot;url(#clip)&quot;);
  
      var div = d3
        .select(&quot;body&quot;)
        .append(&quot;div&quot;)
        .attr(&quot;class&quot;, &quot;tooltip&quot;)
        .style(&quot;opacity&quot;, 0);
  
      const mouseover = function (event, d) {
        div.style(&quot;opacity&quot;, 1);
      };
  
      const mousemove = function (event, d) {
        div
          .html(function (d1) {
            if (d.type != &quot;learner&quot;)
              return `The resource name is ${d.resource_name}`;
            else return `This is ${d.name}`;
          })
          .style(&quot;position&quot;, &quot;absolute&quot;)
          .style(&quot;left&quot;, event.pageX + 15 + &quot;px&quot;)
          .style(&quot;top&quot;, event.pageY + 15 + &quot;px&quot;);
      };
  
      const mouseleave = function (event, d) {
        div.transition().duration(200).style(&quot;opacity&quot;, 0);
      };
  
      var points = points_g.selectAll(&quot;point&quot;).data(data1);
  
      points = points
        .enter()
        .append(&quot;image&quot;)
        .attr(&quot;xlink:href&quot;, function (d) {
          if (d.type == &quot;video&quot;) return &quot;Images/video.jpg&quot;;
          else if (d.type == &quot;pdf&quot;) return &quot;Images/pdf.png&quot;;
          else if (d.type == &quot;Start&quot;) return &quot;Images/Start.png&quot;;
          else if (d.type == &quot;Destination&quot;) return &quot;Images/Destination.png&quot;;
          else if (d.type == &quot;none&quot;) return &quot;Images/GreenDot.png&quot;;
          else if (d.type == &quot;Step&quot;) return &quot;Images/Flag.png&quot;;
          else if (d.type == &quot;iiitb&quot;) return &quot;Images/BlueDot.png&quot;;
          else if (d.type == &quot;learner&quot;) return &quot;Images/learner.png&quot;;
        })
        .attr(&quot;x&quot;, function (d) {
          return xScale(+d.ld[0]) - 10;
        })
        .attr(&quot;y&quot;, function (d) {
          return yScale(+d.ld[1]) - 10;
        })
        .attr(&quot;width&quot;, 20)
        .attr(&quot;height&quot;, 20)
        .on(&quot;mouseover&quot;, mouseover)
        .on(&quot;mousemove&quot;, mousemove)
        .on(&quot;mouseleave&quot;, mouseleave);
  
      label
        .selectAll(&quot;.text&quot;)
        .data(data1)
        .enter()
        .append(&quot;text&quot;)
        .text(function (d) {
          return d.resource_name;
        })
        .attr(&quot;x&quot;, function (d) {
          return xScale(+d.ld[0]) + 10;
        })
        .attr(&quot;y&quot;, function (d) {
          return yScale(+d.ld[1]) + 10;
        });
  
      var createSeries = function (name, data, color) {
  
        // create and customize the connector series
        var connectorSeries = map
          .connector(data)
          .name(name)
          .fill(color)
          .stroke({
            color: color,
            thickness: 2
          });
  
        // change the coloring of the connector line in the hovered state
        connectorSeries
          .hovered()
          .stroke('1.5 #212121')
          .fill('#212121');
  
        // configure the arrow marker
        connectorSeries
          .markers()
          .position('100%')
          .fill(color)
          .stroke({
            color: color
          })
          .size(8);
  
        // configure the arrow marker in the hovered state
        connectorSeries
          .hovered()
          .markers()
          .position('100%')
          .size(10)
          .fill('#212121')
          .stroke('2 #455a64');
  
        // set the labels for the source countries
        connectorSeries
          .labels()
          .enabled(true)
          .format(function () {
            return this.getData('from');
          });
  
        // set the thickness of the connector line based on the series
        if (name === 'More than 50,000') {
          connectorSeries.startSize(5).endSize(2);
        } else if (name === '40,000 to 50,000') {
          connectorSeries.startSize(3.5).endSize(1.5);
        } else if (name === '20,000 to 40,000') {
          connectorSeries.startSize(3).endSize(1);
        } else if (name === '16,000 to 20,000') {
          connectorSeries.startSize(2).endSize(0.5);
        } else {
          connectorSeries.startSize(1).endSize(0);
        }
  
        // configure the settings for the legend items
        connectorSeries
          .legendItem()
          .iconType('square')
          .iconFill(color)
          .iconStroke(false);
  
      };
      focus
        .selectAll(&quot;line&quot;)
        .data(groupData)
        .enter()
        .append(&quot;path&quot;)
  
        .attr(&quot;fill&quot;, &quot;none&quot;)
        .attr(&quot;stroke-dasharray&quot;, function (d) {
          if (d.type != &quot;Step&quot;) return ('3, 3');
          else
            return null;
        })
          
        // .attr(&quot;stroke-dasharray&quot;, &quot;4, 4&quot;)   //Dashed line
  
  
        .attr(&quot;stroke&quot;, function (d) {
          return color(d[0]);
        })
  
        .attr(&quot;stroke-width&quot;, 1)
        .attr(&quot;d&quot;, function (d) {
          return d3
            .line()
            .curve(d3.curveMonotoneX)
            .x(function (d) {
              return xScale(+d.ld[0]);
            })
            .y(function (d) {
              return yScale(+d.ld[1]);
            })(d[1]);
        });
  
  
      var zoom = d3
        .zoom()
        .scaleExtent([0.5, 20])
        .extent([
          [0, 0],
          [width, height],
        ])
        .on(&quot;zoom&quot;, zoomed);
  
      svg
        .append(&quot;rect&quot;)
        .attr(&quot;width&quot;, width)
        .attr(&quot;height&quot;, height)
        .style(&quot;fill&quot;, &quot;none&quot;)
        .attr(&quot;transform&quot;, &quot;translate(&quot; + margin.left + &quot;,&quot; + margin.top + &quot;)&quot;)
        .lower();
  
      svg.call(zoom).call(zoom.transform, d3.zoomIdentity);
  
      function zoomed({ transform }) {
        var new_xScale = transform.rescaleX(xScale);
        var new_yScale = transform.rescaleY(yScale);
  
        gX.call(xAxis.scale(new_xScale));
        gY.call(yAxis.scale(new_yScale));
  
        points
          .data(data1)
          .attr(&quot;x&quot;, function (d) {
            return new_xScale(d.ld[0]) - 10;
          })
          .attr(&quot;y&quot;, function (d) {
            return new_yScale(d.ld[1]) - 10;
          })
          .attr(&quot;visibility&quot;, function (d) {
            return d.level &gt; transform.k == 0 ? &quot;visible&quot; : &quot;hidden&quot;;
          });
  
        label
          .selectAll(&quot;text&quot;)
          .data(data1)
          .attr(&quot;x&quot;, function (d) {
            return new_xScale(d.ld[0]) + 15;
          })
          .attr(&quot;y&quot;, function (d) {
            return new_yScale(d.ld[1]) + 15;
          })
          .attr(&quot;visibility&quot;, function (d) {
            return d.level &gt; transform.k == 0 ? &quot;visible&quot; : &quot;hidden&quot;;
          });
  
        focus.selectAll(&quot;path&quot;).attr(&quot;d&quot;, function (d) {
          return d3
            .line()
            .curve(d3.curveMonotoneX)
            .x(function (d) {
              return new_xScale(+d.ld[0]);
            })
            .y(function (d) {
              return new_yScale(+d.ld[1]);
            })(d[1]);
        });
      }
    });
  });
  </code></pre>