2

I have read the posts related and feel like my code is accurate; I have tried numerous mutations of this code as well. I am in hopes that someone can find what I am sure is a minor error in my code as I have had no luck detecting it.

Problem: Contents of foreignObject element not rendering in browser visually. DOM elements are apparently inserted into DOM but not visible.

I notice that in Chrome web developer that the foreignObject element is not camelcase in the element inspector however upon editing the html inline it is editable as camelcase, so evidently the element is held as camelcase. This likely has no impact on the issue but thought I would mention it.

DOM after executing:

<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 generation code (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)

Rendered rect element

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 に答える