Question

我的js文件中有以下代码：

d3.selectAll("svg").remove();
svgContainer = d3.select("#MainDiv")
    .append("svg")
    .attr({
        width: 1920,
        height: 932,
        version: 1.1,
        xmlns: "http://www.w3.org/2000/svg",
        viewBox: "-40, -40, 2810, 1940",
        "class": "borgModuleDesigner"
    })
    .on("contextmenu",
        function() {
            d3.event.preventDefault();
        });

使用d3.js v3.5.17时，此代码工作正常。我刚刚升级到v4.0.0，现在我收到以下错误：

Unable to get property 'on' of undefined or null reference

我找不到导致这种情况的原因。我需要更改什么才能在v4中使用它？

编辑：

感谢Gerardo，我现在已经有了我的代码。如果只定义了一个属性，则使用attr，如果多于一个属性则使用。以下代码片段现在可以与d3.js v4.0一起使用，只要我添加对d3-selection-multi.v0.4.min.js的引用：

var BorgAnalogue = function (container, object) {
var d = [{ x: object.X, y: object.Y, moveX: object.X, moveY: object.Y }];
var analogue = container.data(d).append("g").attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; }).call(onDragDrop(dragmove, dropHandler))
    .attr("id", "A" + object.ModuleNumber).attr("title", "Analogue " + object.ModuleNumber + " - brIQ Size: 14&#10;Label = " + object.label + "&#10;Source = " + s).attr("class", "masterTooltip")
    .on("mouseenter", mouseenter).on("mouseleave", mouseleave).on("mousemove", mousemove).on("mousedown", mousedown).on("mouseup", mouseup);
analogue.attr("desc", "Analogue-Analogue Module Parameters-738-470");
analogue.append("rect").attrs({ x: 20, y: 0, width: 220, height: 25, fill: "#FFFFFF", stroke: "black", "stroke-width": 1 });
analogue.append("text").attrs({ x: 43, y: 20, "font-family": "arial", "font-stretch": "condensed", "font-size": "20px", fill: "black" }).text(object.label);
analogue.append("rect").attrs({ x: 20, y: 25, width: 220, height: 55, fill: "#F5F5FF", stroke: "black", "stroke-width": 1, id: "highlight" });
analogue.append("path").attrs({ "d": "M 20,35 a10,15 0 0,0 0,30", fill: "#FFFFFF", stroke: "black", "stroke-width": 1, "class": "analogDrop", "id": "s-50" }).on("mouseover", overNode)
    .on("mouseout", outNode);

}

注意attr和attrs的混合。

Answer 1

变化很小，只有一个字母：attrs而不是attr。这是因为您使用的是多值语法（您的对象）。检查API：

https://github.com/d3/d3-selection-multi

所以，代码应该是：

＆＃13;

svgContainer = d3.select("#MainDiv")
    .append("svg")
    .attrs({
        "width": 1920,
        "height": 932,
        "version": 1.1,
        "xmlns": "http://www.w3.org/2000/svg",
        "viewBox": "-40, -40, 2810, 1940",
        "class": "borgModuleDesigner"
    })
    .on("contextmenu",
        function() {
            d3.event.preventDefault();
        });

＆＃13;

<div id="#MainDiv"></div>

<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>

＆＃13;

点击＆＃34;运行代码段＆＃34;，您将不再看到错误。

但是回答你的问题会产生另一个问题：我只能将selection-multi引用为单独的链接：

<script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>

有趣的是，它并没有使用＆＃34;整体＆＃34; D3 4.0库。它应该使用完整的D3 4.0库：

<script src="https://d3js.org/d3.v4.js"></script>

但是，显然，它并没有。

编辑：看起来，d3.selection-multi不是默认包的一部分。所以，你必须像我在片段中那样做。根据API：

为了简约，多值映射方法已被提取到d3-selection-multi并且不再是默认包的一部分。

破解的代码升级到d3.js v4.0

1 个答案: