javascript - D3.js 条形图不会附加，创建一个新图表

Question

我一直在使用 d3.js 从结果表创建条形图。全部代码如下。一张表从 csv 文件获取数据。然后将其克隆到另一个表，当发生这种情况时，我希望条形图条形发生变化。但会创建一个新的条形图。任何建议或帮助将不胜感激，谢谢。

updateCode()
function test()
{
var source = document.getElementById('table');
var destination = document.getElementById('myclonediv');
var copy = source.cloneNode(true);
copy.setAttribute('id', 'myclonediv');
destination.parentNode.replaceChild(copy, destination);
var canvas;
createGraph()
}
function createGraph()
{
    d3.csv(googlesheet, function(data) {


        //create container - canvas
        canvas = d3.select("body").append("svg")
            //width and height
            .attr("width", 300)
            .attr("height", 1000)

        //add bars  - rectangle 
        canvas.selectAll("rect")
            //loading data variable
            .data(data)
            //enter method
            .enter()
                //append rectangle for each element
                .append("rect")
                //width - d will reference data, d.age - from csv file * 10 so bars are bigger
                .attr("width", function(d) { return d.Random * 10})
                //was 50 now 48 to allow space between bars
                .attr("height", 48)
                // y function of the index, for each element
                .attr("y", function(d, i) { return i *50})
                //colour blue
                .attr("fill", "blue");

            //var newData = parsedCSV.replace(',', '');
            //var test = parsedCSV.substring(parsedCSV.indexOf(",") + 1);


            //add text to each bar - repeat before
        canvas.selectAll("text")
            .data(data)
            .enter()
                .append("text")
                    //white text
                .attr("fill", "red")
                    //same position on each bar -- + 24 is half of 48 in height -- now middle of bar
                .attr("y", function(d,i) { return i *50+24})
                    //what text - d.name
                .text(function(d) { return d.Random; }) 

            }) 


}
function remove()
{
    var tableCode = d3.select("#table");
tableCode.selectAll("*").remove();
    updateCode()
}


function updateCode()
{
  var tabulate = function (data,columns) {                      
   var table = d3.select('#table').append('table')
    var thead = table.append('thead')
    var tbody = table.append('tbody')

    thead.append('tr')
      .selectAll('th')
        .data(columns)
        .enter()
      .append('th')
        .text(function (d) { return d })

    var rows = tbody.selectAll('tr')
        .data(data)
        .enter()
      .append('tr')

    var cells = rows.selectAll('td')
        .data(function(row) {
            return columns.map(function (column) {
                return { column: column, value: row[column] }
          })
      })
      .enter()
    .append('td')
      .text(function (d) { return d.value })

  return table;
}

d3.csv(googlesheet,function (data) {
    var columns = ['Test','Random']
  tabulate(data,columns)



})
}

Answer 1

每次运行 createGraph() 函数时，您都会执行以下操作:

canvas = d3.select("body").append("svg")

这意味着每次运行该函数时，您的“ Canvas ”选择都是一个新的 svg 元素。使用这个新的 svg，您可以选择所有矩形并进行输入选择:

canvas.selectAll("rect")
    //loading data variable
    .data(data)
    //enter method
    .enter()

但是，由于新的 svg 中没有矩形，因此输入选择会为每个元素创建一个矩形。文本也一样。由于它是一个新的 svg，因此您已经复制了图表。

(输入选择将为数据数组中没有对应 DOM 元素的每一项创建一个 DOM 元素，您的选择为空，因此它为数组中的每一项创建一个元素。 )

最简单的修复方法是不在 createGraph 函数中附加 svg - 将其附加到 html 中或在调用函数之前。然后在 createGraph 函数中选择它:

svg = d3.select("svg") // assuming you have only one svg, otherwise give it an id or class

现在您必须执行正确的进入/更新/退出循环，但不清楚您使用的 d3 版本是什么，这很重要，因为 v3 和 v4 之间存在差异。