SVG append issue in html

Question

Я работаю над приложением, в котором я использую диаграммы d3js в качестве виджетов. При добавлении виджета вызывается функция, которая создает и рисует виджет (элемент svg) для этого div.

Проблема: Моя проблема в том, что, когда один и тот же виджет добавляется дважды, вместо того, чтобы рисовать диаграмму d3js (элемент svg) в новый div, он добавляется к ранее созданному div (с предыдущим svg). Также я столкнулся с проблемой изменения размеров диаграмм при изменении размера div.

Это ответ от AJAX:

<div id="chart"></div> 
<script> 
var m = [30, 50, 10, 30], 
w = 600 - m[1] - m[3], 
h = 400 - m[0] - m[2]; 

var format = d3.format(",.0f"); 

var x = d3.scale.linear().range([0, w]), 
    y = d3.scale.ordinal().rangeRoundBands([0, h], .1); 

var xAxis = d3.svg.axis().scale(x).orient("top").tickSize(-h), 
yAxis = d3.svg.axis().scale(y).orient("left").tickSize(0); 

var svg = d3.select("#chart").append("svg") 
.attr("width", w + m[1] + m[3]) 
.attr("height", h + m[0] + m[2]) 
.attr("viewBox", "0 0 600 400") 
.append("g") 
.attr("transform", "translate(" + m[3] + "," + m[0] + ")") 



    // Parse numbers, and sort by value. 
    data.forEach(function(d) { d.value = +d.value; }); 
    data.sort(function(a, b) { return b.value - a.value; }); 

// Set the scale domain. 
x.domain([0, d3.max(data, function(d) { return d.value; })]); 
    y.domain(data.map(function(d) { return d.name; })); 

    var bar = svg.selectAll("g.bar") 
    .data(data) 
    .enter().append("g") 
    .attr("class", "bar") 
    .attr("transform", function(d) { return "translate(0," + y(d.name) + ")"; }); 

    bar.append("rect") 
    .attr("width", function(d) { return x(d.value); }) 
    .attr("height", y.rangeBand()); 

    bar.append("text") 
    .attr("class", "value") 
    .attr("x", function(d) { return x(d.value); }) 
     .attr("y", y.rangeBand()/2) 
     .attr("dx", 50) 
     .attr("dy", ".35em") 
     .attr("text-anchor", "end") 
     .text(function(d) { return format(d.value); }); 

    svg.append("g") 
     .attr("class", "x axis") 
     .call(xAxis); 

    svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis); 
    </script> 

я добавление этого:

var i = counter; 

$('<div class=\"box\" >'+ response +'</div>').appendTo("#data-"+i); 

Ниже обрезать изображение выпуска:

Answer 1

Кажется мне что ваша основная проблема заключается в том, что вы повторно используете id a ttributes. Вы не можете иметь несколько <div id="chart"></div> на одной странице. Идентификаторы должны быть уникальными.

Каждый экземпляр d3.select("#chart") будет выбирать одинаковые div. Вероятно, он будет первым или последним на странице (в зависимости от браузера).