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を設定したい（あなたが今やっていることは絶対にありません意味になり）。

2番目：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); 

});