d3.js mypaths ist keine Funktion

Question

Ich versuche, meinen Code für eine einfachere Wartung zu trennen, und ich mache etwas falsch. Es gibt eine Konvention in d3, wo Sie einfach Abschnitte einer Variablen zuweisen. Ich versuche, das mit dem folgenden Code zu tun, aber ich bekomme ein 'mypaths.attr ist kein Funktionsfehler'. Was verursacht das?

/Code/

var svgContainer = d3.select("body").append("svg") 
            .attr("width", svgWidth) 
            .attr("height", svgHeight) 
            .attr("viewBox", svgViewBox) 
            .attr("preserveAspectRatio", "xMinYMin meet") 
            .call(d3.zoom().on("zoom", function() { 
              svgContainer.attr("transform", d3.event.transform) 
                })) 
            .append("g");    


var mypaths = d3.json("myJSONURL.com", function(err,data) { 
    if(err) console.log(err); 

    svgContainer.selectAll("path") 
          .data(data) 

          .enter() 
          .append("path"); 
    }); 

var styles = mypaths 
       .attr("id", function (d) { return d.id; }) 
       .attr("d", function (d) { return d.d; }) 
       .style("fill", "#FFFFFF") 
        .style("stroke", "#1C1C1C") 
        .style("stroke-width", "3px") 
        .style("stroke-linecap", "round") 
        .on("mouseover", handleMouseOver) 
        .on("mouseout", handleMouseOut) 
        .on("click", handlePathClick); 

Answer 1

Erstens: Sie wahrscheinlich myPaths auf die Pfade festlegen möchten Sie zeichnen (was Sie jetzt tun, macht absolut kein Sinn).

Zweitens: alles, was von data abhängt, muss innerhalb d3.json Rückruf sein (d3.json ist asynchron).

So, ich denke, dass das ist, was Sie wollen:

d3.json("myJSONURL.com", function(err, data) { 
    if (err) console.log(err); 

    var mypaths = svgContainer.selectAll("path") 
     .data(data) 
     .enter() 
     .append("path"); 

    var styles = mypaths 
     .attr("id", function(d) { 
      return d.id; 
     }) 
     .attr("d", function(d) { 
      return d.d; 
     }) 
     .style("fill", "#FFFFFF") 
     .style("stroke", "#1C1C1C") 
     .style("stroke-width", "3px") 
     .style("stroke-linecap", "round") 
     .on("mouseover", handleMouseOver) 
     .on("mouseout", handleMouseOut) 
     .on("click", handlePathClick); 

});