Question

我试图分离我的代码以便于维护，我做错了。在d3中有一个约定，您只需将部分分配给变量。我尝试使用以下代码执行此操作，但我得到了一个＆＃39; mypaths.attr不是函数错误＆＃39;。造成这种情况的原因是什么？

/ 码 /

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

});

d3.js mypaths不是一个函数

1 个答案: