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

每次运行canvas = d3.select("body").append("svg")函数时，都会执行以下操作：

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

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

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

但是，由于新的svg中没有矩形，因此输入选择会为每个元素创建一个矩形。文字相同。而且因为它是一个新的svg，你复制了你的图形。

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

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

{{1}}

现在你必须执行一个正确的输入/更新/退出周期，但是不清楚你正在使用哪个版本的d3，这很重要，因为v3和v4之间存在差异。

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

1 个答案: