Question

这是最新更新的代码。在采用数据集对象的更新函数中，此代码将呈现实时图例。加载脚本时可以初始化其他图表元素，并且这些元素的输入，更新和退出选择也属于更新功能。也许它很有用。是给我的。我想我可以将它添加到任何图表中。 Working fiddle

 var legendG = svg.selectAll(".legend")
              .data(donut(dataset), function (d) {
                  return d.data.label;
              })

    var legendEnter = legendG.enter();


    legendEnter = legendEnter.append("g")
               .attr("class", "legend");

    //Now merge Enter and Update and adjust the location
    legendEnter.merge(legendG)
            .attr("transform", function (d, i) { return "translate(" + (width 
    - 350) + "," + (i * 15 + 20) + ")"; })
            .attr("class", "legend");

    legendG.exit().remove();

    // Apend only to the enter selection
    legendEnter.append("text")
         .text(function (d) {
             return d.data.label;

         })
         .style("font-size", 12)
         .attr("y", 10)
         .attr("x", 11);


    //Now merge Enter and Update the legend color
    legendEnter.merge(legendG)
        .append("rect")
        .attr("width", 10)
        .attr("height", 10)
        .attr("fill", function (d, i) {

            console.log('index: ' + i + ' ' + d.data.label)
            var c = color(i);
            return c;
        });

Answer 1

合并选择后，您应该同时更新transform和update选择的enter属性：

 var legendG = svg.selectAll(".legend")
           .data(donut(dataset), function (d) {
               return d.data.label;
           })

      var  legendEnter= legendG.enter().append("g")
                 .attr("class", "legend");  


      //Now merge Enter and Updatge and adjust the location
      legendEnter.merge(legendG)
           .attr("transform", function (d, i) { return "translate(" + (width - 500) + "," + (i * 15 + 20) + ")"; })
           .attr("class", "legend");    


      legendG.exit().remove();

      // Apend only to the enter selection
      legendEnter.append("rect")
          .attr("width", 10)
          .attr("height", 10)
          .attr("fill", function (d, i) {
              return color(i);
          });
    ...

上一篇文章更新了小提琴：fiddle

d3实时图表传奇设计

1 个答案: