如何使用geoChoroplethChart和dc.js在Mapchart的路径上添加标签或自定义值？

在上面的评论中，您找到或创建了一个可以回答原始问题的示例。然后，您问如何使它适用于同一页面上的两个图表。

这只是使选择器正确设置的问题，并且还了解dc.js如何呈现和重新绘制工作。

首先，那个例子

var labelG = d3.select("svg")

它将始终选择svg页面上的第一个元素。您可以通过使选择器更具体（例如#us-chart svg和）来解决此问题#us-chart2 svg，但是我更喜欢使用chart.select（）函数，该函数在特定图表的DOM树中进行选择。

接下来，请务必记住，渲染图表时，它将删除所有内容并从头开始。本示例调用dc.renderAll()两次，因此对第一张图表所做的任何修改都将在第二张渲染图上丢失。

相反，更改任何过滤器都会发生重绘，并且它会逐渐更改图表，并保留先前的内容。

我更喜欢听dc.js图表​​事件，然后进行修改。这样，每次绘制或重绘图表时，都可以进行修改。

特别是，我尝试尽可能地使用该pretransition事件来修改图表。这是在绘制后立即发生的，因此您有机会进行更改而不会出现任何故障或暂停。

始终在绘制图表之前添加事件侦听器。

为两个图表添加（相同）处理程序，然后进行渲染，如下所示：

    usChart.on('pretransition', function(chart) {
        var project = d3.geo.albersUsa();

        var labelG = chart.select("svg")
            .selectAll('g.Title')
              .data([0])
            .enter()
            .append("svg:g")
            .attr("id", "labelG")
            .attr("class", "Title");

        labelG.selectAll("text")
            .data(labels.features)
            .enter().append("svg:text")
            .text(function(d){return d.properties.name;})
            .attr("x", function(d){return project(d.geometry.coordinates)[0];})
            .attr("y", function(d){return project(d.geometry.coordinates)[1];})
            .attr("dx", "-1em");
    });

    usChart2.on('pretransition', function(chart) {
        var project = d3.geo.albersUsa();

        var labelG = chart.select("svg")
            .selectAll('g.Title')
              .data([0])
            .enter()
            .append("svg:g")
            .attr("id", "labelG")
            .attr("class", "Title");

        labelG.selectAll("text")
            .data(labels.features)
            .enter().append("svg:text")
            .text(function(d){return d.properties.name;})
            .attr("x", function(d){return project(d.geometry.coordinates)[0];})
            .attr("y", function(d){return project(d.geometry.coordinates)[1];})
            .attr("dx", "-1em");
    });
    dc.renderAll();

我在那里使用了另外一个技巧：由于pretransition渲染和重绘都发生了，但是我们只想添加一次这些标签，所以我使用这种模式：

        .selectAll('g.Title')
          .data([0])
        .enter()
        .append("svg:g")
        .attr("class", "Title");

这是最简单的数据绑定：它说我们想要一个，g.Title而它的数据就是value 0。由于我们为g元素提供了Title类，因此可以确保仅添加一次该元素。

最后，该表达式的结果是回车选择，因此我们仅text在Title图层为新图层时才添加元素。

你的小提琴的叉子。