0
我目前正在與d3圖書館合作。我有一個將加載2個外部js腳本的HTML文件。一個腳本將創建一個d3強制圖形,另一個腳本將創建一個高圖形圖表。d3圖凍結高圖
im當前面臨的問題是繪製了高圖表時圖表佈局凍結。我用超時來延遲圖表的繪圖,所以我可以確定圖表是問題所在。當圖表繪製拋出以下錯誤:
Uncaught TypeError: Cannot read property 'x' of undefined
用下面的代碼:
force.on("tick", function()
{
link.attr("x1", function (d) {return d.source.x;})
.attr("y1", function (d) {return d.source.y;})
.attr("x2", function (d) {return d.target.x;})
.attr("y2", function (d) {return d.target.y;});
d3.selectAll("circle")
.attr("cx", function (d) {return d.x;}) //<- error
.attr("cy", function (d) {return d.y;});
d3.selectAll("text")
.attr("x", function (d) {return d.x;}) //<- error
.attr("y", function (d) {return d.y;});
});
我不知道爲什麼highcharts應該對D3庫的副作用。
感謝您的任何建議
[編輯]最小示例
HTML文件加載腳本:
<head>
<!-- d3 library -->
<script type="text/javascript" src="js/d3.min.js"></script>
<!-- highchart library -->
<script type="text/javascript" src="js/highcharts.min.js"></script>
<!-- chart style -->
<script type="text/javascript" src="js/chart_style.js"></script>
</head>
<body>
<!-- here the d3 graph gets created -->
<script type="text/javascript" src="js/d3_script.js"></script>
<!-- here the chart gets created -->
<!--<script type="text/javascript" src="js/chart.js"></script>-->
</body>
D3腳本:
// Setup
var color = d3.scale.category20();
var width = window.innerWidth;
var height = window.innerHeight;
var power = -100;
var distance = 100;
var svg = d3.select("body").append("svg").attr("width", '100%').attr("height", height);
var force = d3.layout.force().charge(power).linkDistance(distance).size([width, height]);
var graph = {nodes:[{name : "A"}, {name : "B"}], links: [{source: 0, target : 1}]};
force.nodes(graph.nodes).links(graph.links).start();
// Tooltip
var tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
// Links
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function (d) { return 1});
// Nodes
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter()
.append("g")
.attr("class", "node")
.attr("id", function(d){ return "group-" + d.group})
.call(force.drag)
.append("circle")
.attr("r", 8)
.style("fill", function (d) {return color(d.group); })
.on("mouseover", function(d,i) {
tooltip.transition().duration(200).style("opacity", .9);
tooltip.html(d.name)
.style("left", (d3.event.pageX - d.name.length*3) + "px")
.style("top", (d3.event.pageY - 35) + "px");
})
.on("mouseout", function(d) {
tooltip.transition().duration(500).style("opacity", 0);
});
// Update
force.on("tick", function()
{
link.attr("x1", function (d) {return d.source.x;})
.attr("y1", function (d) {return d.source.y;})
.attr("x2", function (d) {return d.target.x;})
.attr("y2", function (d) {return d.target.y;});
d3.selectAll("circle")
.attr("cx", function (d) {return d.x;})
.attr("cy", function (d) {return d.y;});
d3.selectAll("text")
.attr("x", function (d) {return d.x;})
.attr("y", function (d) {return d.y;});
});
圖表腳本:
setTimeout(function()
{
document.getElementsByTagName('body')[0].innerHTML += "<div id='dummy'></div>";Highcharts.chart('dummy', {series: [{name: 'Test1', data: [0, 1, 2, 3]}]});
}, 2000);
嗨@chriszo,你能否給我提供一些最小的實際工作示例,它顯示你的問題? –
提供了一個最小的例子 – chriszo