I am creating some paths ina tree-graph in D3 and I'd like to change the color of the lines (paths), but I can't make my code work:

 // Enter any new links at the parent's previous position.
      link.enter().insert("svg:path", "g")
          .attr("class", "link")
          .attr("d", function(d) {
            var o = {x: source.x0, y: source.y0};
            return diagonal({source: o, target: o});
          })
        .transition()
          .duration(duration)
          .attr("d", diagonal);

      // Transition links to their new position.
      link.transition()
          .duration(duration)
          .attr("d", diagonal);

      // Transition exiting nodes to the parent's new position.
      link.exit().transition()
          .duration(duration)
          .attr("d", function(d) {
            var o = {x: source.x, y: source.y};
            return diagonal({source: o, target: o});
          })
          .remove();

I tried using the following to change and I've look-up up a few other solution, but I can't really understand what I need to select in my update selection to change it.

  link.selectAll("path")
      .attr("stroke", "#000000");

Thanks for the help in advance.

I am creating some paths ina tree-graph in D3 and I'd like to change the color of the lines (paths), but I can't make my code work:

 // Enter any new links at the parent's previous position.
      link.enter().insert("svg:path", "g")
          .attr("class", "link")
          .attr("d", function(d) {
            var o = {x: source.x0, y: source.y0};
            return diagonal({source: o, target: o});
          })
        .transition()
          .duration(duration)
          .attr("d", diagonal);

      // Transition links to their new position.
      link.transition()
          .duration(duration)
          .attr("d", diagonal);

      // Transition exiting nodes to the parent's new position.
      link.exit().transition()
          .duration(duration)
          .attr("d", function(d) {
            var o = {x: source.x, y: source.y};
            return diagonal({source: o, target: o});
          })
          .remove();

I tried using the following to change and I've look-up up a few other solution, but I can't really understand what I need to select in my update selection to change it.

  link.selectAll("path")
      .attr("stroke", "#000000");

Thanks for the help in advance.

• javascript
• d3.js

Share Improve this question Follow edited May 13, 2014 at 13:40 laaposto 12.2k1515 gold badges5858 silver badges7272 bronze badges asked May 13, 2014 at 13:38 Sina SohiSina Sohi 2,77999 gold badges3636 silver badges5151 bronze badges 3

• 1 link.style("stroke", "black") – Lars Kotthoff Commented May 13, 2014 at 13:50
• Thank you. Why don't I have to select path in this case? – Sina Sohi Commented May 13, 2014 at 14:01
• The link selection contains the path elements. – Lars Kotthoff Commented May 13, 2014 at 14:02

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

I'm just starting with d3 myself, but I think you need to use link.style("stroke",#xxxxxx).

An svg can change the color by using fill attribute (same is plex for path attribute even though its children of svg)

  svg
    .data([newValue])
    .transition()
    .duration(1500)
    .attr('fill', function(d) { return color(d); })

Working code for your reference:
https://jsfiddle/pjrc0yy3/1/