在d3.js节点中添加“ triangle-up”

Question

I have the following code:

var nodeEnter = node.enter().append("svg:g")
              .attr("class", "node")
              .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
              .on("click", function(d) { toggle(d); update(d); });

          nodeEnter.append("svg:circle")
              .attr("r", 1e-6)
              .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

          nodeEnter.append("svg:text")
              .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
              .attr("dy", ".35em")
              .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
              .text(function(d) {
                if (d.size != undefined) {
                    return d.name + " :: " + d.size + " :: " + d.diff_day;
                } else {
                    return d.name;
                }
                })
              .style("fill-opacity", 1e-6)
              .style("font-size", "15px");

          nodeEnter.append("svg:path").attr("d", d3.svg.symbol.type("triangle-up").style("fill", "black"));

Now, the problem is that the svg:circle and svg:text are coming fine. But the "d3.svg.symbol.type("triangle-up").style("fill", "black"));" doesn't seem to work. Any help would be appreciated...

Answer 1

You cannot set the attribute properties on the symbol you create itself like this:

 nodeEnter.append("svg:path")  // Wrong.
     .attr("d", d3.svg.symbol.type("triangle-up").style("fill", "black"));

You have to first set the d attribute, and then set the style fill on the path :

 nodeEnter.append("svg:path")  // Fixed.
     .attr("d", d3.svg.symbol().type("triangle-up"))
     .style("fill", "black");