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

我已经搜索了很多地方，但我无法找出我的代码出了什么问题。如果我遗漏了一些明显的东西，我会道歉

我有一个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}]
            }
        ]
    }
};

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

我想在同一HTML页面上显示一个使用

data.by\u date

中的数据和

data.by\u location

中的可缩放圆圈的折线图。我有两个Javascript函数

by_date

，它创建了一个折线图，还有

by_location

，它创建了一个圈回，它们的代码与Mike Bostock的折线图和可缩放的圈回示例完全相同，我调用它们如下：

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}]
            }
        ]
    }
};

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(data.by_date);
by_location(data.by_location); // Zoom works great now!

既然按日期
只使用
数据。按日期
，甚至不接触
数据。按地点
，为什么注释出来会使按地点
工作正常

下面是一些小提琴演示了这个问题：

line和circlepack（circlepack不缩放）：

折线图功能按日期进行注释（缩放效果良好）：

请注意，这两个小提琴之间的唯一区别是按日期对
的注释调用

非常感谢您的帮助。提前谢谢
 本例中的问题是，在缩放转换中，您选择了文档中的所有
文本
元素，包括折线图，其中元素的绑定数据没有任何
父属性（因此出现错误消息）

修复很容易。只需将过渡选择约束到当前图表即可。在您的情况下，您已经有一个文本元素的选择，您可以简单地重用它，如下所示：

// 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

这是一份。
谢谢你，奥列格！我完全忽略了这样一个事实：transition.selectAll（“text”）
正在选择文档中的所有文本节点。非常感谢！