破碎的代码升级到d3.js v4.0 [英] Broken code upgrading to d3.js v4.0
问题描述
我在我的js文件中有以下代码：
d3.selectAll（svg）。
svgContainer = d3.select（＃MainDiv）
.append（svg）
.attr（{
width：1920，
height：932，
版本：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，我现在得到以下错误：
无法获取属性'on'的undefined或null参考
我找不到导致这种情况的原因。
编辑：
感谢Gerardo，我现在有我的代码工作。如果只定义了一个属性，请使用attr，如果多个属性，则使用attrs。下面的代码片段现在适用于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， object.Y}];
var analogue = container.data（d）.append（g）。attr（transform，function（d）{returntranslate（+ dx +，+ dy +）; };。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）
analog.attr（desc，Analogue-Analogue Module Parameters-738-470）;
analog.append（rect）。attrs（{x：20，y：0，width：220，height：25，fill：#FFFFFF，stroke：black，stroke-width ：1}）;
analog.append（text）。attrs（{x：43，y：20，font-family：arial，font-stretch：condensed，font-size： 20px，fill：black}）。text（object.label）;
analog.append（rect）。attrs（{x：20，y：25，width：220，height：55，fill：＃F5F5FF，stroke：black，stroke-width ：1，id：highlight}）;
analog.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。
变化很小，只有一个字母： attrs 而不是 attr 。这是因为你使用的是多值语法（你的对象）。检查API：
https：// github.com/d3/d3-selection-multi
因此，代码应为：
< 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>
点击运行代码段，您将不会再看到错误。 / p>
但回答你的问题产生了另一个问题：我只能让它工作引用 selection-multi ：
< script src =https://d3js.org/d3-selection-multi.v0.4.min .js>< / script>
有趣的是，它不能使用整体D3 4.0库。 应使用完整的D3 4.0库：
< script src =https： /d3js.org/d3.v4.js\"> ;</script>
但是，显然没有。
EDIT：看起来， d3.selection-multi 不是默认包的一部分。所以，你必须按照我在代码段中做的方式。根据API：
为简单起见，多值映射方法已经提取到d3-selection-multi不再是默认捆绑包的一部分。
I have the following code in my js file:
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();
});
This code worked fine when using d3.js v3.5.17. I just upgraded to v4.0.0 and I now get the following error:
Unable to get property 'on' of undefined or null reference
I can't find what has caused this to break. What do I need to change to get this to work in v4?
EDIT:
Thanks to Gerardo, I have now got my code to work. Use attr if only one attribute is defined, attrs if more than one. The following snippet of code now works with d3.js v4.0, as long as I add the reference to 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 Label = " + object.label + " 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);
}
Note the mix of attr and attrs.
The change is minimal, just one letter: attrs instead of attr. That's because you are using a multi-value syntax (your object). Check the API:
https://github.com/d3/d3-selection-multi
So, the code should be:
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();
});
<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>
Click "run code snippet", and you'll not see the error anymore.
But answering your question created another question: I could only make it work referencing the selection-multi as a separate link:
<script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>
Funny enough, it doesn't work using the "whole" D3 4.0 library. It should work using the complete D3 4.0 library:
<script src="https://d3js.org/d3.v4.js"></script>
But, apparently, it doesn't.
EDIT: As it seemed, d3.selection-multi is not part of the default bundle. So, you'll have to do the way I did in the snippet. According to the API:
For the sake of parsimony, the multi-value map methods have been extracted to d3-selection-multi and are no longer part of the default bundle.
这篇关于破碎的代码升级到d3.js v4.0的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
