javascript - 如何阻止 d3 标题在每次图表更新时一次又一次地附加

Question

我有一些 c3 图表，当我从下拉列表中选择不同的值时，它们会更新。问题是，每次我选择图表时，标题都会第二次附加，我该如何解决这个问题。

Fiddle:

我的代码:

  function checkIt(error, root){
var partition = d3.layout.partition()
                  .value(function(d) { return d.Total; });

var dropDown = d3.select("#dropdown_container")
                   .append("select")
                   .attr("class", "selection")
                    .attr("name", "country-list");

    var nodeArr = partition.nodes(root);
    var options = dropDown.selectAll("option")
                  .data(nodeArr)
                  .enter()
                  .append("option");

  options.text(function (d) {
            var prefix = new Array(d.depth + 1);
      var dropdownValues =  d.name.replace(/[_-]/g, " ");
      return dropdownValues;
    }).attr("value", function (d) {
      var dropdownValues = d.name;
            return dropdownValues;
    });

  d3.select(".selection").on("change", function changePie() {
    var value = this.value;
    var index = this.selectedIndex;
    var dataObj = nodeArr[index];
   var heading =  d3.select("#heading_2")
        .append("text")
        .attr("text-anchor", "middle")
        .style("font-size", "16px")
        .style("text-decoration", "underline")
        .text("Electricity and Heat");
    //chart 1
    var elec_plants = dataObj["Main activity electricity plants"];
    var chp_planrs = dataObj["Main activity CHP plants"];
    var auto_pro = dataObj["Unallocated autoproducers / Other energy industry own use"];
    var other_elec = dataObj["Other electricity"];

    var chart = c3.generate({
    bindto: "#chart_1",
    data: {
        columns: [
            ['electricity plants', elec_plants],
            ['CHP plants', chp_planrs],
            ['Unallocated autoproducers / Other energy industry own use', auto_pro],
            ['Other', other_elec],
        ],
        type : 'pie'
    },
    legend: {
        show: false
    },
    color: {
        pattern: ["#d73027", "#fc8d59", "#fee08b", "#d9ef8b", "#91cf60", "#1a9850"]
    }
});
var heading =  d3.select("#heading_3")
        .append("text")
        .attr("text-anchor", "middle")
        .style("font-size", "16px")
        .style("text-decoration", "underline")
        .text("Manufacturing and construction");
    //generating chart 2
    var manu_iron = dataObj["Iron and steel"];
    var manu_che = dataObj["Chemical and petrochemical"];
    var manu_mach = dataObj["Machinery"];
    var manu_mini = dataObj["Mining and quarrying"];
    var manu_food = dataObj["Food and tobacco"];
    var manu_pulp = dataObj[" pulp and printing"];
    var manu_paper = dataObj["paper"];
    var manu_cons = dataObj["Construction"];
    var manu_other = dataObj["Other industries"];

    var chart = c3.generate({
    bindto: "#chart_2",
    data: {
        columns: [
            ['Iron and steel', manu_iron],
            ['Chemical and petrochemical', manu_che],
            ['Machinery', manu_mach],
            ['Mining and quarrying', manu_mini],
            ['Food and tobacco', manu_food],
            ['Paper, pulp and printing', manu_pulp],
            ['Construction', manu_cons],
            ['Other', manu_other],

        ],
        type : 'pie'
    },
    legend: {
        show: false
    },
    color: {
        pattern: ["#d73027", "#fc8d59", "#fee08b", "#d9ef8b", "#91cf60", "#1a9850"]
    }
});
var heading =  d3.select("#heading_4")
        .append("text")
        .attr("text-anchor", "middle")
        .style("font-size", "16px")
        .style("text-decoration", "underline")
        .text("Transport");
        //generating chart 3
    var trans_ro = dataObj["Road"];
    var trans_avi = dataObj["Domestic aviation"];
    var trans_rail = dataObj["Rail"];
    var trans_navi = dataObj["Domestic navigation"];
    var trans_other = dataObj["Other transport"];

    var chart = c3.generate({
    bindto: "#chart_3",
    data: {
        columns: [
            ['Road', trans_ro],
            ['Domestic aviation', trans_avi],
            ['Rail', trans_rail],
            ['Domestic navigation', trans_navi],
            ['Other', trans_other],
        ],
        type : 'pie'
    },
    legend: {
        show: false
    },
    color: {
        pattern: ["#d73027", "#fc8d59", "#fee08b", "#d9ef8b", "#91cf60", "#1a9850"]
    }
});
var heading =  d3.select("#heading_5")
        .append("text")
        .attr("text-anchor", "middle")
        .style("font-size", "16px")
        .style("text-decoration", "underline")
        .text("Other Sectors");
        //generating chart 4
    var resi = dataObj["Residential"];
    var com = dataObj["Commercial and public services"];
    var agri = dataObj["Agriculture/forestry"];
    var other_sec = dataObj["Other resi"];


    var chart = c3.generate({
    bindto: "#chart_5",
    data: {
        columns: [
            ['Residential', resi],
            ['Commercial and public services', com],
            ['Agriculture/forestry', agri],
            ['Other', other_sec],
        ],
        type : 'pie'
    },
    legend: {
        show: false
    },
    color: {
        pattern: ["#d73027", "#fc8d59", "#fee08b", "#d9ef8b", "#91cf60", "#1a9850"]
    }
});
var heading =  d3.select("#heading_1")
        .append("text")
        .attr("text-anchor", "middle")
        .style("font-size", "16px")
        .style("text-decoration", "underline")
        .text("Fuels");
        //generating chart 5
    var coal = dataObj["Sub-bituminous coal / Lignite"];
    var coal2 = dataObj["Other bituminous coal"];
    var gas = dataObj["Natural gas"];
    var gasoline = dataObj["Motor gasoline excl. bio"];
    var oil = dataObj["Gas/diesel oil excl. bio"];
    var other_oils = dataObj["Other Fuels"];

    var chart = c3.generate({
    bindto: "#chart_4",
    data: {
        columns: [
            ['Sub-bituminous coal / Lignite', coal],
            ['Other bituminous coal', coal2],
            ['Natural gas', gas],
            ['Motor gasoline excl. bio', gasoline],
            ['Gas/diesel oil excl. bio', oil],
            ['Others', other_oils],
        ],
        type : 'bar'
    },
    legend: {
        show: false
    },
    axis: {
  x: {
    show: false
  },
  y: {
    show: false

  }
},
    color: {
        pattern: ["#d73027", "#fc8d59", "#fee08b", "#d9ef8b", "#91cf60", "#1a9850"]
    }
  });
  });}

d3.json("https://gist.githubusercontent.com/heenaI/cbbc5c5f49994f174376/raw/55c672bbca7991442f1209cfbbb6ded45d5e8c8e/data.json", checkIt);

如何附加标题:

var heading =  d3.select("#heading_5")
        .append("text")
        .attr("text-anchor", "middle")
        .style("font-size", "16px")
        .style("text-decoration", "underline")
        .text("Other Sectors");
        //generating chart 4

Answer 1

问题是您在更改选择时附加文本。因此，每次您选择时都会附加一个新文本。

因此，在添加文本之前，您需要删除旧文本

 d3.select("#heading_5 text").remove();//remove the text  

var heading =  d3.select("#heading_5")
        .append("text")
        .attr("text-anchor", "middle")
        .style("font-size", "16px")
        .style("text-decoration", "underline")
        .text("Other Sectors");

工作代码here