文章/答案/技术大牛

发布

社区首页 >问答首页 >d3图具有高图冻结

问d3图具有高图冻结
EN

Stack Overflow用户

提问于 2017-09-23 19:08:04

回答 1查看 211关注 0票数 0

我目前正在使用d3库。我有一个HTML文件，它将加载2个外部js脚本。一个脚本将创建一个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;});
});

我不知道为什么高图表会对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);

d3.js

highcharts

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-10-03 15:00:28

我通过图的超时值函数解决了这个问题。不知何故，当首先绘制图形时，就会出现问题。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/46383302

复制

相似问题

问d3图具有高图冻结
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问d3图具有高图冻结EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问d3图具有高图冻结
EN