SVG在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 属性。一个页面上不能有多个 <div id="chart"></div>。 ID 必须是唯一的。

d3.select("#chart") 的每个实例都将选择相同的div。它可能是页面上的第一个或最后一个（取决于浏览器）。