Javascript 获取画布d3js的实例

我是d3js新手，正在尝试保存d3js画布对象的一个实例。保存之后，我想获取保存的d3js画布的元素

编辑问题： 从本质上说，我想做的是在d3.json函数中绘制的元素绘制完成后，访问这些元素

下面是我的html和javascript代码：

HTML Before d3.json load:
<div id="model_container" style="position: fixed; top: 0px; bottom: 0px; left: 0px; right: 20%">

HTML After d3.json load:
<div id="model_container" style="position: fixed; top: 0px; bottom: 0px; left: 0px; right: 20%">
.
.
.
.
 <g id='reactions'>
     <g id='r0' class='reaction'>
       <g class='reaction-label-group' transform='translate(360,500)'>
         <text class='reaction-label label'>HELLO</text>
       <g id='r1' class='reaction'>
         <g class='reaction-label-group' transform='translate(365,500)'>
           <text class='reaction-label label'>HELLO2</text>
</div>

JavaScript:
var canvasMap = d3.json(document.getElementById("model").value, function(error, data) {
     if (error) console.warn(error);
     var options = {menu: 'all', canvas_size_and_loc: { x: '200', y: '200', width: '5000', height: '5000' }};
     var b = escher.Builder(null, data, null, d3.select('#model_container'), options);
     b.map.new_reaction_from_scratch('GAPD',{ x: 350, y: 315 }, 90);
     b.map.new_reaction_from_scratch('PGK',{ x: 950, y: 315 }, 90);
     b.map.select_all();
   });

   canvasMap.selectAll(".reaction-label-group").each(function (d) { console.log(d) });

---

首先，var canvasMap=d3.json不会返回任何您正在查找的内容，它：

返回一个新请求，以获取指定url处的JSON文件 默认mime类型application/json

第二，我认为是你问题的核心：

基本上，我想做的是访问 在d3.json函数中绘制，在绘制之后

如果您使用d3.json绘制元素，如so或任何其他方式：

d3.json("file.json", function(error, data) {
    // add elements based on json data:
    var select = svg.selectAll("path")
      .data(data)
      .enter()
      .....  // and so on
})

那么您将无法使用此代码选择这些元素：

var selection;
d3.json("file.json", function(error, data) {
    // add elements based on json data:
    selection = svg.selectAll("path")
      .data(data)
      .enter()
      ..... 
})
selection.attr("fill","steelblue")

为什么?？因为d3.json是异步的——代码不会按照编写的顺序执行。d3.json中的回调函数、d3.jsonfile、functionerror、data{和}之间的代码仅在加载json文件后执行。加载该文件时，回调外部的代码将继续执行。我的行选择。attrfill，steelblue不会做任何事情，因为选择还没有保存任何内容-json仍在加载

如果要选择在回调中添加的内容，请将该代码放入回调本身：

var selection;
d3.json("file.json", function(error, data) {
    // add elements based on json data:
    selection = svg.selectAll("path")
      .data(data)
      .enter()
      ..... 

     selection.attr("fill","steelblue")
})

---

它将在加载文件和添加元素后执行。

D3没有使用…为我的术语道歉，我还是新的d3js。我所说的画布是指绘图区域。但本质上，我想做的是在d3.json函数中绘制的元素绘制完成后访问它们。我将编辑我的原始问题。我建议您使用d3方式，使用选择/输入功能进行绘图。这样，绘制的元素将可以作为选择访问，并在以后使用、更新或删除。@dandavis您可以使用D3创建一个：D3是渲染不可知的，这意味着它可以创建SVG、画布、HTML等。。。你从哪里得到这些信息的？@dandavis这不仅是可能的：API中的许多示例都是使用canvas的。这里：这里：或者这里：例子比比皆是。事实上，当去年发布新的API时，大多数示例都使用canvas，很少使用SVG。我非常感谢您的简明解释。谢谢你。我执行了你的建议，但我还有一个问题。当我试图从HELLO中提取HELLO或HELLO2时，我得到一个svg对象。下面是我用于提取d3.selectAll.reaction-label-group.eachfunction d{reactionsVar.pushd.path；}的代码；这是控制台日志：[Array2]0:2[g，g，parentNode:html]，如果您想访问文本，可以使用：textSelection.text。如果你有许多文本可供选择，那么。每个文本都有功能{d3.selectthis.text应该可以。但是，在评论中回答问题是很困难的，如果你有新问题，你应该发布新问题：你将获得更多的听众和可能更好的答案，并且有更多的空间来展示你正在尝试做的事情和更多的空间来回答。再次感谢。我将把它作为一个单独的问题发布。