Javascript D3.js中标签的转换：更改时重命名标签名称并平滑转换

我是d3的初学者，我正在用d3.js创建一个不断变化的条形图。我已经做到了可以创建条形图，在单击单选按钮时更改数据集，以及更改轴

现在我没有做的是改变x轴和y轴上标签的名称。我也不能让我的标签滴答声与我的条平稳过渡，它们只是突然变化

对于我的标签名称，我试图删除这些名称，然后在我的on change函数中再次添加它。但这仅从一开始就显示新文本：

附加到svg：

 //y-axis
    svg.append("text")
        .attr("class", "y label")
        .attr("text-anchor", "end")
        .attr("y", -20)
        .attr("dy", ".75em")
        .attr("transform", "rotate(0)")
        .text("Crazy label name for axis");

然后在我的更改功能中将其删除并重新添加：

 svg.select(".y.label").remove();

         svg.append("text")
        .attr("class", "y label")
        .attr("text-anchor", "end")
        .attr("y", -20)
        .attr("dy", ".75em")
        .attr("transform", "rotate(0)")
        .text("new crazy text");

此外，我无法使用我的条形图平滑地获得每个条形图过渡的勾号名称或标签名称

有人能帮我吗？非常感谢

以下是完整代码和示例数据：

 d3.selectAll("input").on("change", function(d) {
      selectDataset.call(this, d);
    });

    function selectDataset(d) {
      let value = this.value;
      if (value === "heat") {
        change(datasetTotal, value, "Default text");
      } else if (value === "cool") {
        change(datasetOption1, value, "Text 2");
      } else if (value === "area") {
        change(datasetOption2, value, "Text 3");
      }
}

    var margin = {
            top: (parseInt(d3.select('.area-heat-cool').style('height'), 10) / 20),
            right: (parseInt(d3.select('.area-heat-cool').style('width'), 10) / 20),
            bottom: (parseInt(d3.select('.area-heat-cool').style('height'), 10) / 20),
            left: (parseInt(d3.select('.area-heat-cool').style('width'), 10) / 5)
        },
        width = parseInt(d3.select('.area-heat-cool').style('width'), 10) - margin.left - margin.right,
        height = parseInt(d3.select('.area-heat-cool').style('height'), 10) - margin.top - margin.bottom;

    var div = d3.select(".area-heat-cool").append("div").attr("class", "toolTip");

    var y = d3.scaleBand()
        .rangeRound([height, 0], .2, 0.5)
        .paddingInner(0.1);

    var x = d3.scaleLinear()
        .range([0, width]);

    var xAxis = d3.axisBottom()
        .scale(x);

    var yAxis = d3.axisLeft()
        .scale(y);

    var svg = d3.select(".area-heat-cool").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    //x-axis
    svg.append("text")
          .attr("class", "x label")
          .attr("data-default", "text2_contact2")
          .attr("text-anchor", "end")
          .attr("x", width)
          .attr("y", height - 6)
          .text("Default text");

    //y-axis
    svg.append("text")
        .attr("class", "y label")
        .attr("text-anchor", "end")
        .attr("y", -20)
        .attr("dy", ".75em")
        .attr("transform", "rotate(0)")
        .text("Text of y Axis");


    d3.select("input[value=\"heat\"]").property("checked", true);
    change(datasetTotal);

    function change(dataset, optionSelect, textselect) {

        y.domain(dataset.map(function(d) {
            return d.label;
        }));
        x.domain([0, d3.max(dataset, function(d) {
            return d.value;
        })]);

        svg.select(".y.axis").remove();
        svg.select(".x.axis").remove();
        // svg.select(".y.label").remove();

        d3.select(".x.label").text(textselect).transition().duration(1000) ;

        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

        svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)
            .append("text")
            .attr("transform", "rotate(0)")
            .attr("x", 50)
            .attr("dx", ".1em")
            .style("text-anchor", "end")
            .text("Option %");


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

        var barExit = bar.exit().remove();

        var barEnter = bar.enter()
                        .append("g")
                        .attr("class", "bar");

        var barRects = barEnter.append("rect")
            .attr("x", function(d) {
            return x(0);
        })
        .attr("y", function(d) {
            return y(d.label);
        })
        .attr("width", function(d) {
            return x(d.value);
        })
        .attr("height", y.bandwidth());

        var barTexts = barEnter.append("text")
            .attr("x", function(d) {
                return x(d.value) + 10;
            })
            .attr("y", function(d) {
                return y(d.label) + y.bandwidth() / 2;
            })
            .attr("dy", ".35em")
            .text(function(d) {
                return d.value;
            });


        barRectUpdate = bar.select("rect")
                  .transition()
                  .duration(3050)
                  .attr("x", function(d) {
                    return x(0);
                  })
                  .attr("y", function(d) {
                    return y(d.label);
                  })
                  .attr("width", function(d) {
                    return x(d.value);
                  })
                  .attr("height", y.bandwidth())
                  .style('fill', function () {
                    if (optionSelect === "heat") {
                      return '#A12D24'
                    } else if (optionSelect === "cool") {
                      return '#668BA4'
                    } else if (optionSelect === "area") {
                      return 'lightgrey'
                    }
                  });

        var barTextsUpdate = bar.select("text")
              .transition()
              .duration(3050)
              .attr("x", function(d) {
              return x(d.value) + 10;
            })
            .attr("y", function(d) {
                return y(d.label) + y.bandwidth() / 2;
            })
            .attr("dy", ".35em")
            .text(function(d) {
                return d.value;
            });

    }

数据看起来像

data1 = [{label: "example 1", value: 156}
{label: "example 2", value: 189}
{label: "example 3", value: 234}
{label: "example 4", value: 345}
{label: "example 5", value: 346}
{label: "example 6", value: 456}
{label: "example 7", value: 489}
{label: "example 8", value: 567}]; 


data2 = [{label: "example 1", value: 23}
{label: "example 2", value: 211}
{label: "example 3", value: 45}
{label: "example 4", value: 64}
{label: "example 5", value: 95}
{label: "example 6", value: 32}
{label: "example 7", value: 0}
{label: "example 8", value: 234}]; 

---

问题是您正在删除文本的DOM元素，而不是更新它们。如果需要删除它们，则可以淡出文本并在末尾删除它们，如d3.selecttext.transition.duration300.styleopacity，0.onend，=>{d3.selecttext.removeAll}

---

但我建议您重新使用标签，只需使用相同的d3.select.transition.duration300方式更新其内容即可

非常感谢Cornel！明天当我回到电脑前，我会试试这个，让你知道！很抱歉回复晚了，我周末没在电脑上。在您的帮助下，Cornel我现在成功地转换了文本标签，如下所示：d3.select.x.label.textextselect.transition.duration1000；我在函数中传递textvalue。我现在的问题是默认值不显示。它仅在我单击单选按钮时显示，而不是在开始时显示。我更新了代码。你知道为什么会这样吗？谢谢，againI将在else分支上显示默认值，而不是一个let value=this.value；if值===酷{changedatasetOption1，值，文本2；}否则if值===区域{changedatasetOption2，值，文本3；}否则{changedatasetTotal，值，默认文本；}谢谢！！不幸的是，它仍然没有像这样显示默认值。。。。我还认为它没有显示很奇怪，因为我在调用函数之前附加了它，对吧？！如果没有函数，它将显示defaultJust Notified-selectDataset是在d3.selectAllinput.onchange函数中定义的，functiond{listener函数。尝试在函数外部提取它并默认调用它。在侦听器中使用它将仅在值更改时执行，而不是默认情况下执行