Question

我是 d3.js 的新手，目前我正在一个需要 d3.js 的项目中工作。我正面临一个问题需要帮助/指导来解决这个问题。

问题是 在我的svg容器中我有2个硬编码的矩形[用svg.append（“rect”）创建]。

现在我有json dataset 2 data to create another 2 rectangles[在运行时json中可能有更多数据，这是静态示例。

现在，当我使用以下代码时，它只创建了1个矩形。

注意svg上的selectAll函数选择其他2个先前创建的矩形，并且只动态创建额外的1 rectangles (3 in json - 2 hardcoded rectangles = 1 rectangles created).

但是我希望json中的所有data (3)都应该创建一个由Json创建的3 rectangle矩形，并且硬编码的矩形应该保持不变。

但它没有这样做，我在这篇文章中添加了html代码。这是我到目前为止尝试过的javascript和HTML。

请帮忙。

<html>
<head>
<meta charset="ISO-8859-1">
<title>D3 Test</title>
<script type="text/javascript" src="d3/d3.v3.min.js"></script>
</head>
<body>
<h1>hello....</h1>
<div id="chartDiv">
</div>
<script type="text/javascript">
  var w = 1000;
  var h = 400;
  var svgContainer = d3.select("#chartDiv").append("svg").attr("width",     w).attr("height", h);          

     var call_result_dataset = [{"x_axis":40, "y_axis":10, "width":5, "height":110, "color":"green"},
                                {"x_axis":700, "y_axis":10, "width":5, "height":110, "color":"red"},
                                {"x_axis":760, "y_axis":10, "width":5, "height":110, "color":"red"}];

     var call_result_strip = svgContainer.append("rect")
                                        .attr("id", "call_result_strip")
                                        .attr("x", 10)
                                        .attr("y", 10)
                                        .attr("width", 980)
                                        .attr("height", 110)
                                        .attr("fill", "rgb(235,235,235)");

     var call_type_strip = svgContainer.append("rect")
                                        .attr("id", "call_type_strip")
                                        .attr("x", 10)
                                        .attr("y", 200)
                                        .attr("width", 980)
                                        .attr("height", 110)
                                        .attr("fill", "rgb(235,235,235)");



     var call_result_strip_bars = svgContainer.selectAll("rect")
                                              .data(call_result_dataset)
                                              .enter()
                                              .append("rect");

         var all_r_strip = call_result_strip_bars.attr("x", function(d){ return d.x_axis;})
                                        .attr("y", function(d){ return d.y_axis;})
                                        .attr("width", function(d){ return d.width;})
                                        .attr("height", function(d){ return d.height;})
                                        .attr("fill", function(d){ return d.color;})
                                        .attr("id", function(d,i) {return     "result_"+i;});

    </script>
</body>
</html>

Answer 1

您可以使用以下代码段：

svgContainer.selectAll(".dynamicRects")
.data(call_result_dataset)
.enter()
.append("rect")
.addClass('dynamicRects')
...

这样，输入选择将首先为空，然后将创建三个动态rects。

Answer 2

选择具有相同类名的任何内容都符合您的要求。

svgContainer.selectAll()
             .data(call_result_dataset)
             .enter()
             .append("rect");

建议使用类名作为选择，代码就像..

svgContainer.selectAll(".someClass")
             .data(call_result_dataset)
             .enter()
             .append("rect").classed("someClass",true);

d3.selectAll（）。data（myDataSet）.enter（）。append（“rect”）选择以前创建的矩形而不是myDataSet

2 个答案: