0
私は現在d3ライブラリで作業しています。私は2つの外部jsスクリプトを読み込むHTMLファイルを持っています。 1つのスクリプトはd3強制グラフを作成し、もう1つはハイチャートグラフを作成します。d3グラフハイチャートでフリーズ
現時点で直面している問題は、ハイチャートチャートがプロットされているときにグラフレイアウトがフリーズしていることです。タイムアウトを使用してチャートのプロットを遅らせることで、チャートが問題であることを確信できます。チャートをプロットすると、次のエラーがスローされます。次のコードで
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ライブラリへの副作用を持つべき理由はわかりません。任意の提案
ため
おかげで[EDIT]最小限の例のスクリプトを読み込む
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