隐藏平行坐标图的一个轴

时间:2015-07-24 13:20:55

标签: javascript d3.js axes parallel-coordinates

我用平行坐标库表示一些数据(基于d3.js)(https://github.com/syntagmatic/parallel-coordinates#parallel-coordinates

代码的主要功能部分如下:

ObjectAnimator objectAnimator= ObjectAnimator.ofFloat(view2, "translationY", 0, -200);
objectAnimator.setDuration(500);
objectAnimator.start();

到目前为止它工作得很好:) 但现在我想隐藏平行坐标的一个特定轴;我只是不想表现出来。

我希望轴被完全删除,这样就不会占用任何地方,并且这些线不会影响这个维度的值,但我不想通过操纵数据来做到这一点。我只想操纵情节(这就是我称之为隐藏的原因)。

我搜索过api描述,但没找到。我在网上搜索但也没找到任何东西。但我想我记得我已经看到了代码的和平,第一个轴被隐藏了,但我再也找不到了。
任何人都可以告诉我,我如何隐藏轴或我可以找到解决方案的位置? 谢谢,问候 琼斯

2 个答案:

答案 0 :(得分:2)

您错过了.hideAxis(array)方法调用,其中数组是您要隐藏的数据集中确切列名的键列表。这种方法完全符合您的要求:

  • “...隐藏平行坐标的一个特定轴;我只是不想显示它。”
  • “我希望删除轴是完整的[原文如此],因此不会占用任何位置”
  • “这些维度不会影响这个维度的值,但是我不想通过操纵[原文如此]的数据来做到这一点。我只想操纵情节。”

要实现此方法,您的代码必须是

var parcoords = d3.parcoords()("#example")  //#example is the div for the drowing
                    .data(eingabe)          // eingabe is the var, which contains the data
                    .hideAxis(["col1", "col2"])
                    .render()       
                    .reorderable()
                    .shadows()      
                    .brushMode("1D-axes") 

注意:.hideAxis如果您不想隐藏任何轴,即.hideAxis([])

,则可以采用空白数组

如果要允许用户指定要删除的轴,可以在某种更新/重绘功能中实现此方法;否则,通过DOM完全删除它是不可能的。 这是通过代码执行轴隐藏,是您实现所需内容的唯一选择。

要查看此方法的实际效果,请查看API文档,特别是http://syntagmatic.github.io/parallel-coordinates/index.html#example1上的“example1”图表和代码

答案 1 :(得分:0)

假设您只想隐藏轴(即使其不可见)而不是完全删除它

d3.selectAll("#example0 > svg > g > g.dimension:nth-child(3)").attr("opacity", "0");

假设example0是svg元素周围的包装器的id。如果你有svg元素,你也可以直接在你的svg元素上做同样的事情。

上述内容仍然可以让您与隐藏轴的过滤器进行交互。要使其不可互动,请使用.attr("display", "none");

没有小提琴,但您应该能够复制粘贴上面的行并从http://syntagmatic.github.io/parallel-coordinates/的控制台运行它,并在Bundling部分中查看图表上的效果。

分别是之前和之后的效果

enter image description here