小编Ami*_*ana的帖子

我正在使用d3.js作为图表.在某些时候,我必须显示数据与图的一些特殊部分,例如,如果值跨越某个边界然后显示具有填充模式的部分.更清楚的是有和图像.

我得到越过边界的矩形部分,但我怎么能用这种模式填充它？任何CSS或画布技巧？

注意:这个图像只是一个不是真实的例子

我真的很喜欢foreignObject在svg上显示HTML区域,但今天我发现它在IE9中不起作用(为什么我并不感到惊讶)好.所以我正在寻找一种适用于IE9的替代方案,但似乎很难.使用foreignObject显示多个HTML元素的好处.

我的D3.js Force布局图在chrome和FF中工作得很好,但是在IE9中它因为foreignObject而失败.我在Div中添加了许多HTML元素,还有更多的CSS内容.我尝试用其他xhtml:div或xhtml:body替换foreignObject但它不起作用

这是两个小提琴

工作小提琴

需要在IE9上运行

修改小提琴

node.append("foreignObject")
    .attr("class", "simpleDiv")
    .attr("width",50)
    .attr("overflow", "visible")
    .attr("height", 50)
    .append("xhtml:div").attr("class", "mainDiv").style("cursor", hoverStyle)
    .html(function (d) {
       var htmlString = "";
       var userImage = "http://t2.gstatic.com/images?q=tbn:ANd9GcT6fN48PEP2-z-JbutdhqfypsYdciYTAZEziHpBJZLAfM6rxqYX";
       htmlString += "<div class='userImage' style='border-color:" + color(d) + "'><image src='" + userImage + "' width='36' height='36'></image></div>";
       htmlString += "<div class='content' style='color:" + color(d) + ";'>" + d.name + "</div>";
       htmlString += "<div style='clear:both;'></div>";
       return htmlString;
     });

你可以在IE9中测试原始例子也是foreignObject

我正在研究svg项目我使用d3.js来获得更好的ui,在我的图表中添加了缩放功能,但奇怪的是它的缩放在Google Chrome中不起作用

svg.call(d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom));

function zoom() {
    svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

而且我想阻止节点拖动的转换,因为节点和窗格同时拖动,所以它看起来非常难看.这是我的小提琴

测试将左侧元素拖动到右侧div

我正在使用 d3-flow-tree（此处）将我的树节点显示为流布局。并添加其他 g 元素来表示两个节点之间的连接（通过使用 flow -layout 管理其他图表）。

当绘制从一个节点到另一个节点的链接时，它必须是矩形路径，不会像附加图像那样与其他节点相交

需要找到可能的可用路径。欢迎任何建议和想法。

提前致谢

我正在使用d3js,其中lib根据数据创建节点和链接.在某些地方有一些特定的要求,在同一行添加多个文本,如网址"www.xyz.com/home/user"(此处为3个字符串"www.xyz.com","/ home","/ user").它们不是单独的节点,所以我找不到d3的位置.它只是一个带有3个<tspan>子元素的<text>元素.

<text id="TaxFilingResource_URL" class="label url" dy="24" dx="30">
  <tspan id="TaxFilingResource.URL.1">www.xyz.com</tspan>
  <tspan id="TaxFilingResource.URL.2">/home</tspan>
  <tspan id="TaxFilingResource.URL.3">/user</tspan>
</text> 

并在下面显示如下

  www.xyz.com/home/user 

我需要获取每个<tspan>元素的位置和宽度.我的代码是

var el = document.getElementById(d.source);
x = el.getStartPositionOfChar('').x   (or)
x = el.getClientRects().left;

在g元素内的文本上给出相对位置,但在某些浏览器和mac上它将返回绝对位置.

有没有正确的方法可以在JavaScript中找到适用于所有浏览器的tspan的位置和宽度(IE必须>第9版).