d3.js mypaths不是函數

Question

我試圖分離我的代碼，以便於維護，我做錯了什麼。 在d3中有一個約定，您可以簡單地將部分分配給一個變量。我試圖用下面的代碼做到這一點，但我得到'mypaths.attr不是函數錯誤'。這是什麼造成的？

/代碼/

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

第一：你可能需要設置myPaths你正在繪製的路徑（你現在正在做正確的使得完全沒有感）。

二：一切取決於data必須在d3.json回調（d3.json是異步）。

因此，我想，這是你想要什麼：

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

});