尝试使用plotly创建我的第一个图表，我收到了d3错误：
Uncaught TypeError: e.getAttribute is not a function d3.v3.min.js:1
(anonymous function) @ d3.v3.min.js:1
e @ d3.v3.min.js:1
(anonymous function) @ d3.v3.min.js:3
N @ d3.v3.min.js:1
Ro.each @ d3.v3.min.js:3
Ro.classed @ d3.v3.min.js:3
I.plot @ plotly.min.js:11
这是我的实际代码。请注意，我使用从此处下载的js运行此命令：http://d14fo0winaifog.cloudfront.net/plotlyjs_basic.zip。
我的问题可能是我正在尝试创建一个histogram2dcontour图，但是我从该链接获得的代码中没有该图吗？
function generate_heatmap(divId) {
var data = [
{
x: ["X", "-45470.884", "-25150.884", "-4830.884", "15489.116", "35809.116", "56129.116", "96769.116", "76449.116", "56129.116", "35809.116", "15489.116", "-4830.884", "-25150.884", "-45470.884", "-65790.884", "-86110.884", "-106430.884", "-86110.884", "-65790.884", "-45470.884", "-25150.884", "-4830.884", "15489.116", "35809.116", "56129.116", "76449.116", "96769.116", "117089.116", "137409.116", "117089.116", "96769.116", "76449.116", "56129.116", "35809.116", "15489.116", "-4830.884", "-25150.884", "-45470.884", "-65790.884", "-86110.884", "-106430.884", "-126750.884", "-126750.884", "-106430.884", "-86110.884", "-65790.884", "-45470.884", "-25150.884", "-4830.884", "15489.116", "35809.116", "56129.116", "76449.116", "96769.116", "117089.116", "137409.116", "137409.116", "117089.116", "96769.116", "76449.116", "56129.116", "35809.116", "15489.116", "-4830.884", "-25150.884", "-45470.884", "-65790.884", "-86110.884", "-106430.884", "-126750.884", "-106430.884", "-86110.884", "-65790.884", "-45470.884", "-25150.884", "-4830.884", "15489.116", "35809.116", "56129.116", "76449.116", "96769.116", "117089.116", "96769.116", "76449.116", "56129.116", "35809.116", "15489.116", "-4830.884", "-25150.884", "-45470.884", "-65790.884", "-86110.884", "-45470.884", "-25150.884", "-4830.884", "15489.116", "35809.116", "56129.116"],
y: ["Y", "126470.809", "126470.809", "126470.809", "126470.809", "126470.809", "126470.809", "96030.809", "96030.809", "96030.809", "96030.809", "96030.809", "96030.809", "96030.809", "96030.809", "96030.809", "96030.809", "65590.809", "65590.809", "65590.809", "65590.809", "65590.809", "65590.809", "65590.809", "65590.809", "65590.809", "65590.809", "65590.809", "65590.809", "35150.809", "35150.809", "35150.809", "35150.809", "35150.809", "35150.809", "35150.809", "35150.809", "35150.809", "35150.809", "35150.809", "35150.809", "35150.809", "35150.809", "4710.809", "4710.809", "4710.809", "4710.809", "4710.809", "4710.809", "4710.809", "4710.809", "4710.809", "4710.809", "4710.809", "4710.809", "4710.809", "4710.809", "-25729.191", "-25729.191", "-25729.191", "-25729.191", "-25729.191", "-25729.191", "-25729.191", "-25729.191", "-25729.191", "-25729.191", "-25729.191", "-25729.191", "-25729.191", "-25729.191", "-56169.191", "-56169.191", "-56169.191", "-56169.191", "-56169.191", "-56169.191", "-56169.191", "-56169.191", "-56169.191", "-56169.191", "-56169.191", "-56169.191", "-86609.191", "-86609.191", "-86609.191", "-86609.191", "-86609.191", "-86609.191", "-86609.191", "-86609.191", "-86609.191", "-86609.191", "-117049.191", "-117049.191", "-117049.191", "-117049.191", "-117049.191", "-117049.191"],
z: ["Bottom", "2402.508", "2394.335", "2392.09", "2379.4", "2390.327", "2387.344", "2383.739", "2362.802", "2394.312", "2417.5", "2422.291", "2426.842", "2421.105", "2407.7", "2395.756", "2395.244", "2390.439", "2408.907", "2418.84", "2404.997", "2393.726", "2382.456", "2395.41", "2405.049", "2415.781", "2412.865", "2389.956", "2385.163", "2307.628", "2360.378", "2407.691", "2410.356", "2377.242", "2358.369", "2372.157", "2375.485", "2361.955", "2359.317", "2388.163", "2426.737", "2409.668", "2407.087", "2391.4", "2416.33", "2420.959", "2378.277", "2363.087", "2393.965", "2382.122", "2409.348", "2373.825", "2366.037", "2403.651", "2417.157", "2397.253", "2395.124", "2566.075", "2399.791", "2421.277", "2411.701", "2377.111", "2360.186", "2383.232", "2385.762", "2372.153", "2364.688", "2399.55", "2429.811", "2420.915", "2391.578", "2379.343", "2435.295", "2422.931", "2410.738", "2368.105", "2363.223", "2367.033", "2386.632", "2414.157", "2426.998", "2399.832", "2396.781", "2380.191", "2391.172", "2416.81", "2432.585", "2423.98", "2429.311", "2427.395", "2439.335", "2414.746", "2375.659", "2375.096", "2382.304", "2388.411", "2382.999", "2366.534", "2383.433"],
autobinx: true,
autobiny: true,
autocolorscale: false,
autocontour: false,
colorbar: {
x: 0.960996325031,
y: 0.534862385321,
bgcolor: "rgba(0, 0, 0, 0)",
bordercolor: "#444",
borderwidth: 0,
exponentformat: "B",
len: 1,
lenmode: "fraction",
nticks: 0,
outlinecolor: "#444",
outlinewidth: 1,
showexponent: "all",
showticklabels: true,
thickness: 30,
thicknessmode: "pixels",
tickangle: "auto",
tickfont: {
color: "#444",
family: "\"Open sans\", verdana, arial, sans-serif",
size: 12
},
tickmode: "auto",
ticks: "",
title: "yo ",
titlefont: {
color: "#444",
family: "\"Open sans\", verdana, arial, sans-serif",
size: 12
},
titleside: "top"
},
colorscale: "Hot",
contours: {
coloring: "fill",
end: 5.505,
showlines: true,
size: 0.5,
start: 0.5
},
histnorm: "",
line: {
color: "#000",
dash: "solid",
smoothing: 1,
width: 0.5
},
name: "Col3",
opacity: 1,
reversescale: false,
showscale: true,
type: "histogram2dcontour",
uid: "80eb26",
xbins: {
end: 200000,
size: 50000,
start: -200000
},
ybins: {
end: 200000,
size: 50000,
start: -200000
},
zauto: false,
zmax: 6,
zmin: 0
}
];
var layout = {
autosize: true,
dragmode: "zoom",
font: {
color: "#444",
family: "\"Open sans\", verdana, arial, sans-serif",
size: 12
},
height: 463,
hidesources: false,
hovermode: "x",
paper_bgcolor: "#fff",
plot_bgcolor: "#fff",
separators: ".,",
title: "hi",
titlefont: {
color: "#444",
family: "\"Open sans\", verdana, arial, sans-serif",
size: 17
},
width: 869,
xaxis: {
autorange: true,
exponentformat: "B",
gridcolor: "#eee",
gridwidth: 1,
mirror: false,
nticks: 0,
range: [-175000, 175000],
showexponent: "all",
showgrid: true,
showline: false,
showticklabels: true,
tickangle: "auto",
tickcolor: "#444",
tickfont: {
color: "#444",
family: "\"Open sans\", verdana, arial, sans-serif",
size: 12
},
ticklen: 5,
tickmode: "auto",
ticks: "outside",
tickwidth: 1,
title: "blow",
titlefont: {
color: "#444",
family: "\"Open sans\", verdana, arial, sans-serif",
size: 14
},
type: "linear",
zeroline: true,
zerolinecolor: "#444",
zerolinewidth: 1
},
yaxis: {
autorange: true,
exponentformat: "B",
gridcolor: "#eee",
gridwidth: 1,
mirror: false,
nticks: 0,
range: [-175000, 175000],
showexponent: "all",
showgrid: true,
showline: false,
showticklabels: true,
tickangle: "auto",
tickcolor: "#444",
tickfont: {
color: "#444",
family: "\"Open sans\", verdana, arial, sans-serif",
size: 12
},
ticklen: 5,
tickmode: "auto",
ticks: "outside",
tickwidth: 1,
title: "yo",
titlefont: {
color: "#444",
family: "\"Open sans\", verdana, arial, sans-serif",
size: 14
},
type: "linear",
zeroline: true,
zerolinecolor: "#444",
zerolinewidth: 1
}
};
Plotly.plot(divId, data, layout);
}
另一个更新，以显示我如何称呼它。此函数是对象的on click处理程序：
function load_heatmap()
{
var hm_id = 'heatmap1';
var el_hm = $('<div />').attr('id', hm_id);
generate_heatmap(el_hm);
}
generate_heatmap如上所示。它以
结尾Plotly.plot(divId, data, layout);
我没有贬低plotly.js，它在第441行爆炸：
437 function _(t) {
438 var e = x(t);
439 return function(n, r) {
440 if (a = n.classList) return r ? a.add(t) : a.remove(t);
441 var a = n.getAttribute("class") || "";
442 r ? (e.lastIndex = 0, e.test(a) || n.setAttribute("class", y(a + " " + t))) : n.setAttribute ("class", y(a.replace(e, " ")))
443 }
444 }
我在441设置断点，从调试器我看到：
> n
< [<div id="heatmap1"></div>]
> n.getAttribute
< undefined
答案 0 :(得分：2)
将Plotly.plot来电签名更改为
Plotly.plot(divId, data, layout)
应该让事情有效。
在您的情况下，divId为hm_id。
请注意，.js代码选项卡显示可重现的node.js代码，而不是plotlyjs。此外，空闲basic plotlyjs不具有直方图2d轮廓轨迹类型。