2

我已经阅读了相关的帖子，感觉我的代码是准确的；我也尝试过多次修改这段代码。我希望有人能在我的代码中找到我确定的小错误，因为我没有运气检测到它。

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

我注意到在 Chrome 网络开发人员中，foreignObject 元素在元素检查器中不是驼峰式，但是在编辑 html 内联时它可以作为驼峰式进行编辑，因此显然该元素被保存为驼峰式。这可能对这个问题没有影响，但我想我会提到它。

执行后的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>

D3 SVG/XHTML 生成代码（CoffeeScript）：

  component = canvas.select("[data-uid=#{entityObj.name}]").selectAll('.component')
    .data(entityObj.components)
    .enter()
    .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}"]})"
    )  
    .append("rect")  
    .attr("width", (componentObj,i,d) => componentObj.width)
    .attr("height", @get('component').height)
    .attr("fill", "red")
    .attr("opacity", "1")
    .append("foreignObject")  
    .attr("width", (componentObj,i,d) => componentObj.width)
    .attr("height", @get('component').height)
    .attr("requiredExtensions", "http://www.w3.org/1999/xhtml")
    .append("body")
    .attr("xmlns","http://www.w3.org/1999/xhtml")
    .append("div")
    .attr("style", (componentObj,i,d) => "width: #{componentObj.width}px; height: #{@get('component').height}px; background-color: yellow;")
    .attr("data-uid", (o,i,d) -> o.uid)

渲染的矩形元素

4

1 回答 1

2

你至少有2个问题。首先<foreignObject>不能是元素的子<rect>元素。我不确定您要实现什么，但您可能需要拆分代码

  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 将在正确的命名空间中创建元素。

于 2013-02-18T17:45:08.257 回答