小编Sco*_*ron的帖子

我有一个场景,我想使用数据连接为每个数据元素追加2个新元素.

我原来是这样做的:

var y = d3.selectAll("line")
    .data([123, 456]);

y.enter().append("line");  // assume attr and style set
y.enter().append("line");

y.transition()...

在我仔细考虑之前,我期待在我的转换中使用的更新选择将包含来自输​​入选择的合并附加.但当然这没有用,因为每个数据元素的选择只有1个插槽.

所以我更改了代码,使得它仍然使用相同的enter()选择两次,然后重新选择新元素以进行转换.

这种方法有效,但我的问题是这是否是推荐的方法.我追加/插入后应该确保停止使用enter()吗？或者可以使用它来创建多个元素,只要我记得更新选择只包含最后创建的元素吗？

如果事实证明这是错误的,那么实现这一目标的更好方法是什么？

我正在使用d3.format("s")和d3.svg.axis.tickFormat来很好地格式化带SI单位的刻度标签(来自国际单位制).它在大多数情况下都能很好地工作,除了遇到舍入误差并返回大量小数位的某些值(1400,例如,1400*0.001 = 1.4000000000000001).

为了解决这个问题,我可以指定一个精度,例如d3.format(".2s"),但是在1会更好的情况下强制2位有效数字.例如,如果我有[5000,10000,15000],我现在会看到[5.0k,10k,15k].最初当我没有指定精度时,我得到[5k,10k,15k].

我想知道是否可以指定最大精度,只有当有效位数超过指定数量时才会应用它？所以5000将是5k而不是5.0k.

关于数据加入的快速问题.假设我有一些元素,每个元素包含一个.当我最初将数据连接到时,它会被我追加到输入选择的元素自动继承.

当数据被更改并且我将其重新绑定到我时,我希望这些元素能够获取新数据,但这并没有发生.

为了解决这个问题,我需要在较低级别显式重新绑定数据,如下所示:

gElements.selectAll("circle")
    .data(function(d) { return [d]; }
    .enter().append("circle");

这将处理创建案例和后续重新绑定.但它似乎有点多余,因为返回[d]本质上是从父元素的初始继承数据自动发生的事情.

这种方法是解决这个问题的正确方法,还是我在这里迷茫了？

我想知道是否有一种更简单的方法来限制文本标签的宽度而不是使用剪辑路径.

以下是我正在寻找的标签示例:treemap:

请注意,标签会被包含切片的边界截断.

该特定示例使用<div>标记实现,默认情况下具有此行为.但是我正在使用SVG <rect>,我希望有一种更直接的方法,而不是一个定义另一个矩形的单独剪辑路径.

在d3中,selection.select具有从原始选择中的父节点继承数据的副作用.在父节点和子节点之间共享数据的情况下,这是合乎需要的,这样绑定到父节点的更新数据将被推送到子节点,而不需要在每个级别进行数据连接.

但是,绑定到父级的数据与绑定到子级的数据之间明确没有关系的情况呢？在这种情况下,selection.select可能是阴险的,因为只需选择一个节点就可以使该节点的数据被不相关的父数据破坏.

避免这种情况的最佳技术是什么？我可以想到几个选项,但看起来都不是很好:

1. selection.selectAll除了需要隐式数据继承的情况外,始终在任何地方使用.然而,这并不理想,因为它使用selection.select与之不一致的用法d3.select来简单地用于选择单个节点(正是我想要做的selection.select).

2. d3.select与后代选择器一起使用,而不是selection.select隔离特定节点.使用的便利之selection.select处在于它隐含地将选择限制为起始选择的后代.使用选择器实现这一点并不是那么好.

就个人而言,我不喜欢在API的一些最常用函数的一种特定形式中具有DOM状态修改副作用.我想,我会觉得更容易理解,如果有一个明确的呼叫如selection.update(selector)要对称selection.append和selection.insert.

但是在当前的API中,我想知道是否有其他机制可以在使用时有效地破坏继承selection.select？

在我看来,Crossfilter永远不会从减少的结果中排除一个组,即使应用的过滤器已排除该组中的所有行.已过滤掉所有行的组只返回聚合值0(或任何reduceInitial返回值).

这样做的问题在于,它无法区分不包含行的组和包含行的组,而只是合法地聚合到值0.基本上,没有办法(我可以看到)区分null值和0聚合.

有没有人知道内置的Crossfilter技术来实现这一目标？我确实想出了一种方法来使用我自己的自定义reduceInitial/reduceAdd/reduceRemove方法来做到这一点,但它并不完全是直接的,在我看来,这是可能/应该更加本地化Crossfilter的过滤语义的行为.所以我想知道是否有规范的方法来实现这一目标.

如果事实证明没有内置方法可以做到这一点,我会发布我的技术作为答案.

这是一个简单的问题...我一直在成功使用d3.svg.line生成器,但我现在需要能够对整个行中的每个单独段进行更多控制.例如,每个段可能需要以不同方式着色.或者每个段甚至可能需要不同的厚度(逐渐变细或取决于相邻段的厚度).

我想知道实现这一目标的最佳工具是什么.我在想或者也许.或者甚至可能只是继续使用d3.svg.line,但每个段都是它自己的行.

寻找其他人使用这种丰富的线条渲染的经验......

这与javascript cloneNode和属性的问题有关.

我看到了同样的行为.Node.cloneNode不会复制我自己添加的任何属性(来自原始帖子的代码):

    var theSource = document.getElementById("someDiv")
    theSource.dictator = "stalin";

    var theClone = theSource.cloneNode(true);
    alert(theClone.dictator); 

theClone 不包含任何属性"独裁者".

我无法找到任何解释为什么会这样.MDN上的文档声明cloneNode"复制其所有属性及其值",这一行直接取自DOM规范本身.

这似乎打破了我,因为它几乎不可能做包含自定义属性的DOM树的深层副本.

我在这里错过了什么吗？

我认为这是Chrome中的一个错误,因为它似乎在Firefox中运行良好,但我希望有人可以推荐一个解决方法(或者告诉我,如果这是我的错,我哪里出错了).

我试图以与此示例类似的方式将标签放入和弦图的组弧: http://bost.ocks.org/mike/uberdata/:

我正在使用textPath这个例子来实现这个目的.我的情况的不同之处在于,我正在运行转换以在创建弧时打开弧,并在数据更改时调整它们的大小.当我在path引用时使用转换时textPath,结果是文本不会立即显示在Chrome上.它按预期存在于DOM中,当我执行类似调整浏览器缩放的操作时,文本弹出视图.

以下是一些显示问题的示例代码:http: //bl.ocks.org/3148920

如果我transition.each("end",...)在路径转换上设置了一个并触摸textPath上的属性,则会显示文本.但是当我调整弧的大小时,这对我没有帮助,在此期间我希望文本与路径一起浮动.在Firefox上这是有效的,但在Chrome上,文本只是保持不变.

有关如何使其工作的任何想法？

我有一些选择的元素,我试图根据特定的样式值过滤掉(我想要只有opacity = 1的元素).我正在查看selection.filter的文档以及selection.select和selection.selectAll,但我对使用函数参数的正确用法感到困惑.

"select"表示它选择了第一个匹配元素(如预期的那样),但是过滤器文档中的示例显示它与函数一起使用,以在保持索引的同时选择"奇数"元素.

"selectAll"表示您可以返回一个元素数组,但是对于原始选择中的每个元素,以常规方式逐个调用函数参数.我很难想象一个用例.

我想我想知道的是,是否有任何教程或示例讨论这些函数的正确用法？

谢谢,斯科特

是否有人在转换SVG文本元素的不透明度时遇到任何问题？我同时使用填充不透明度样式和笔触不透明度样式来使文本元素淡入淡出。它在大多数浏览器上都可以正常运行，但在Mac上的Chrome浏览器中根本无法转换-文本会一次弹出。

除了填充不透明度和笔触不透明度之外，我还尝试设置“不透明度”属性，这似乎确实使其起作用，尽管现在在过渡运行前后，我看到了怪异的闪烁效果。就像是先将其设置为opacity = 1，然后将其设置为0，然后过渡到1。

另一个有趣的事情是，其他形状（圆形，矩形）的淡入淡出效果与我在文本中使用的代码几乎完全相同。

这对于特定的浏览器来说似乎很奇怪，但是我想知道其他人对文本元素的不透明性。是否有技巧使其始终如一？