Javascript 利用d3在SVG内呈现foreignObject失败_Javascript_Svg_Coffeescript_D3.js

Javascript 利用d3在SVG内呈现foreignObject失败

javascript svg coffeescript d3.js

Javascript 利用d3在SVG内呈现foreignObject失败,javascript,svg,coffeescript,d3.js,Javascript,Svg,Coffeescript,D3.js,我读过相关的帖子，觉得我的代码是准确的；我也尝试过许多这种代码的变异。我希望有人能在我的代码中找到我确信是一个小错误的东西，因为我没有幸检测到它问题：foreignObject元素的内容未在浏览器中可视化呈现。DOM元素显然插入到DOM中，但不可见我注意到，在ChromeWebDeveloper中，元素检查器中的foreignObject元素不是camelcase，但是在编辑html内联时，它可以作为camelcase进行编辑，因此显然该元素被作为camelcase保存。这可能对这个问题没有

我读过相关的帖子，觉得我的代码是准确的；我也尝试过许多这种代码的变异。我希望有人能在我的代码中找到我确信是一个小错误的东西，因为我没有幸检测到它

问题：foreignObject元素的内容未在浏览器中可视化呈现。DOM元素显然插入到DOM中，但不可见

我注意到，在ChromeWebDeveloper中，元素检查器中的foreignObject元素不是camelcase，但是在编辑html内联时，它可以作为camelcase进行编辑，因此显然该元素被作为camelcase保存。这可能对这个问题没有影响，但我想我会提到它

执行后的DOM：

<g class="component" transform="translate(75,20)">
  <rect width="100" height="100" fill="red" opacity="1">
    <foreignObject width="100" height="100" requiredExtensions="http://www.w3.org/1999/xhtml">
      <body xmlns="http://www.w3.org/1999/xhtml">
        <div style="width: 100px; height: 100px; background-color: yellow;" data-uid="special_uid">
        </div>
      </body>
    </foreignObject>
  </rect>
</g>

您至少有两个问题。首先，

不能是

元素的子元素。我不确定您想要实现什么，但您可能需要拆分代码

  var g = component.append("g")
    .each( (componentObj,i,d) => 
      @generateAssociationLocalCache(entityObj,componentObj,i,d)
      @generateComponentLocalCache(entityObj,componentObj,i,d)
    )
    .attr("data-uid", (o,i,d)-> o.name)
    .attr("id", (o,i,d)-> o.name)
    .attr("class", "component")
    .attr("transform", (componentObj,i,d) => 
      coords = @rows[entityObj.name]['components'][componentObj.uid]
      "translate(#{coords.x},#{coords["y#{i}"]})"
    )

然后呢

g.append("rect")  
.attr("width", (componentObj,i,d) => componentObj.width)
.attr("height", @get('component').height)
.attr("fill", "red")
.attr("opacity", "1");

g.append("foreignObject")
...

这将使rect和foreignObject成为兄弟

其次，xmlns不是创建对象后可以设置的属性，因此

.append("body")
  .attr("xmlns","http://www.w3.org/1999/xhtml")

应该是

.append("xhtml:body")

d3将在正确的名称空间中创建元素。

Robert，感谢您的快速响应。我真的不关心包含的rect，只想看到对象的对齐方式。最好创建一些我们可以像JSFIDLE一样运行的东西，否则很难调试。是的，正在进行中。1分钟。你上面的一般性陈述就是问题所在。我误解了SVG中foreignObject的潜在用法（仍然不知道它的用法，采取了不同的方法达到相同的目的）。使用的技术来源于感谢！这是一个很好的答案，但我认为在适当的名称空间中创建外部对象是更基本的问题，应该放在首位。将foreignObject放置在“rect”中的问题是一个几乎格式良好的svg，但是最初在正确的名称空间中创建body元素是使用d3的一个独特问题。如果你像我一样得到这个答案，一定要一直读到最后两行！

.append("xhtml:body")