Question

我搜索得很远，我无法弄清楚我的代码有什么问题。如果我遗漏了一些明显的东西，请道歉。

我有一个JSON对象如下：

var data={
    "by_date":[
        {"date":"2014-01-01", "count":10},
        {"date":"2014-02-01", "count":20},
        {"date":"2014-03-01", "count":30},
        {"date":"2014-04-01", "count":15},
        {"date":"2014-05-01", "count":20}
    ],
    "by_location": {
        "name":"World","children":[
            {
                "name":"United States", "children":[{"name":"New York", "children":[{"name":"Albany","count":5}, {"name":"NYC","count":5}]}]
            },
            {
                "name":"Canda", "children":[
                    {
                        "name":"Alberta", "children":[{"name":"Edmonton","count":5},{"name":"Calgary","count":5}]
                    },
                    {
                        "name":"British Columbia", "children":[{"name":"Victoria","count":2},{"name":"Vancouver","count":8}]
                    }
                ]
            },
            {
                "name":"China", "children":[{"name":"Beijing","count":30}]
            },
            {
                "name":"India", "children":[{"name":"Bangalore","count":15}]
            },
            {
                "name":"Germany", "children":[{"name":"Frankfurt","count":20}]
            }
        ]
    }
};

我想在同一个HTML页面上使用来自data.by_date的数据和来自data.by_location的可缩放圆圈包显示折线图。我有两个Javascript函数by_date，它创建一个折线图，by_location创建一个圆包，它们都具有与Mike Bostock的折线图和可缩放的圆包示例完全相同的代码，我称之为如下：

by_date(data.by_date);
by_location(data.by_location); // Creates circlepack, but zoom doesn't work.

问题在于，虽然在页面上创建并显示折线图和圆包，但缩放功能对圆包不起作用。我收到以下错误：

Uncaught TypeError: Cannot read property 'parent' of undefined

但是，如果我不拨打by_date并且只拨打by_location，那么它的效果非常好。

//by_date(data.by_date);
by_location(data.by_location); // Zoom works great now!

由于by_date仅使用data.by_date，甚至没有触及data.by_location，为什么会以某种方式对其进行评论以使by_location正常工作？

以下是展示问题的小提琴：

line和circlepack（circlepack不缩放）：http://jsfiddle.net/xk5aqf8t/6/

折线图功能by_date已评论（缩放工作正常）：http://jsfiddle.net/38sayeqa/

请注意，两个小提琴之间的仅差异是对by_date的评论调用。

非常感谢任何帮助。提前谢谢！

Answer 1

在您的情况下，问题在于您在缩放转换中选择文档中的所有text元素，包括元素的绑定数据没有任何parent属性的折线图（因此错误信息）。

修复很简单。只需将转换选择限制在当前图表中即可。在您的情况下，您已经有了一系列文本元素，您可以简单地重复使用它，如下所示：

// Let's keep our initial selection in the text variable:
var text = svg.selectAll('text').data(nodes);
text.enter()... // the entering selection is a subselection, so we keep it separate

// Create a new transition on the existing selection of text nodes
var transition = text.transition().duration(...); // the transition will reuse `text` selection
transition.filter(...); // don't subselect anything here

这是demo。

d3.js - 来自同一JSON对象的不同部分的同一页面上的多个图表

1 个答案: