javascript - d3.selectAll().data(myDataSet).enter().append ("rect") 正在选择先前创建的矩形而不是 myDataSet-6ren

javascript - d3.selectAll().data(myDataSet).enter().append ("rect") 正在选择先前创建的矩形而不是 myDataSet

转载作者：行者123 更新时间：2023-11-30 10:21:22

25

4

我是 d3.js 的新手，目前我正在从事一个需要 d3.js 的项目。我遇到了一个问题，需要帮助/指导来解决这个问题。

问题是在我的 svg 容器中，我有 2 个硬编码的矩形 [使用 svg.append("rect") 创建]。

现在我有一个 json 数据集，它有 2 个数据来创建另外 2 个矩形[ 运行时 json 中可能有更多数据，这是静态示例]。

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

注意 svg 上的 selectAll 函数选择其他 2 个先前创建的矩形，并且仅动态创建额外的 1 个矩形(json 中的 3 个 - 2 个硬编码矩形 = 1 个已创建的矩形)。

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

但它并没有这样做，我已经在这篇文章中添加了 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>

最佳答案

您可以使用以下代码段:

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

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

关于javascript - d3.selectAll().data(myDataSet).enter().append ("rect") 正在选择先前创建的矩形而不是 myDataSet，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21376393/

25

4

0

文章推荐： javascript - 在 Canvas 上重新绘制透明背景

文章推荐： java - 如何禁用导航菜单中的分线器？

当 Enter 键已被禁用时，jQuery 在按下 Enter 键后禁用 Enter 键
我已经禁用了回车键，以便可以执行 ajax 提交，但我想确保如果用户在服务器响应返回之前按两次回车键，则表单不会提交两次。这里我禁用了回车键并为其分配了一个名为 submitForm() 的函数:
javascript - AngularJS $animate.enter 不添加 ng-enter 和 ng-enter-active 类
我正在尝试将 $animate 服务合并到我自己的指令中。我无法进入并离开以实际设置动画。奇怪的是，使用$animate.enter，元素附加到DOM，回调函数触发。但似乎从未添加 ng-anima
enter - 重击 : Check if enter was pressed
如果，我如何检查 Bash输入键被按下了？我正在使用读取命令: read -p "Please press ENTER" var 最佳答案首先检查退出状态是否正常($?应该为0)。其次，检查
wpf - 区分正常的 "ENTER"和数字键盘 "ENTER"按键？
在我的 PreviewKeyDown() handler 如何区分数字键盘上的 ENTER 键和主板上的 ENTER 键？两个键返回相同的值 Key.Enter为 KeyEventArgs.Key
javascript - 如何捕获文本区域上的 Enter 按键而不是 Shift+Enter？
这个问题已经有答案了: How do I detect "shift+enter" and generate a new line in Textarea? (19 个回答) 已关闭10 年前。我正
javascript - 区分日语汉字建议的 "Enter"按键和其他 "Enter"事件
我的问题与这个 question 有点相关.但是，我没有奢侈去监听 submit 事件，所以这个问题的答案对我来说不起作用。我的问题:是否可以在 Javascript 中检测日文/中文建议菜单何时打
c# - 文本框转换发送 key : Alt + Enter -> Enter
我希望能够在不需要实现新类的情况下修改 wpf 文本框的行为。我想要一个类似 Enter/Alt+Enter 行为的 Excel，当用户点击“Enter”时，文本框被验证(movefocus ...
jquery内容可编辑输入 "How do I trigger shift-enter when someone presses enter?"
在 Chrome 中的 contenteditable 中按 Enter 时，会插入一个 div。这会干扰我的标记，我需要它成为 br。我知道shift-enter是一个br。解决问题的最佳方法是什
javascript - JS 按 Enter 时收到不需要的 'enter/return'
我正在使用$('.inputs').keydown(function (e) { if (e.which === 13) {到达下一个输入字段。但是每次我按 enter/return 转到下一个输入字
javascript - 如何让 ENTER 做某件事并且 ENTER+SHIFT 同时做另一件事？
我有一个 textarea ，其中当您单独按 Enter 时，jquery ajax 会启动，但我想添加一个功能，即当您按 Enter + Shift 时仅转到新行并且不启动ajax。你能指导一下吗？
java - 手机 : Android: How to hit enter after entering a text
场景如下: 有一个密码字段，我可以在其中输入文本(这是使用 sendKeys 完成的) 现在，没有提交/输入按钮所以我必须按 Enter 键并登录应用程序以下是我搜索并尝试但没有成功的几种方法:
javascript - JavaScript 有没有办法将 Enter 更改为 Shift + Enter
这是我尝试过的，但显然失败了: ed.on('keyup', function(e){ console.log(e.keyCode) if(e.keyCode == 13 && !e.
jquery - 阻止用户使用 Enter 提交表单，但在一个表单输入字段上启用 Enter 键
所以我有一个带有 jQuery 的表单，可以阻止用户使用 Enter 键提交表单。这是代码: $(document).ready(function() { // code prevent
Javascript 按键代码 "+1 enter"和 "-1 enter"
有人知道如何在Javascript中检测按键代码“+1 Enter”和“-1 Enter”吗？我想检测何时一一按下键码而不是一次按下键码。但是当我编写以下代码时，没有给出任何效果。 // +1 en
javascript - 如何添加 shift + enter 键转到下一行和提交按钮的 Enter 键？
我想添加 shift + enter 键转到下一行，只需 enter 键即可使用 JAVASCRIPT 触发提交按钮仅。如何实现？我也想提交多行文本......提前致谢 function typ
c - 开关盒 0 : entering 0 and entering a letter
int DisplaySchedule() { int nDisplaySchedule_Choice; system("cls"); printf("----- DISPLA
javascript - 文本区域 Shift+Enter 进入下一行并 Enter 提交表单
在 textarea 中，当用户按下 Shift+Enter 时，它应该在下一个新行继续，当他简单地按下 Enter 时，它应该提交表单而不使用提交按钮。这是 Fiddle!! 我浏览了很多但对我没
javascript - textarea 控件 - 自定义行为 enter/ctrl+enter
我有以下简单的我还有以下 jQuery/JavaScript 代码块: $('textarea#streamWriter').keydown(function (e) { if (e.k
api - 使用Microsoft Office API在Word文档中将 "Shift-Enter"换行符替换为 "Enter"
我有许多将转换为HTML的Word文档。要求单词文档中的段落应转换为元素。在使用Microsoft Office API的SaveAs方法进行了一些测试以将文档转换为HTML之后，我意识到带有手动换
vim - 终端可以检测到或吗？
终端是否可以检测 ⇧ Shift+Enter↵ 或 Ctrl+Enter↵ 按键？我正在尝试配置 vim 来执行使用这些序列的键映射，虽然它们在 gvim 中工作正常，但它们似乎在任何终端控制台中都

首页

博学

6Ren·AI

商城

javascript - d3.selectAll().data(myDataSet).enter().append ("rect") 正在选择先前创建的矩形而不是 myDataSet