【问题标题】:hide one of the axes of a parallel-coordinates plot隐藏平行坐标图的轴之一
【发布时间】:2015-07-24 13:20:55
【问题描述】:

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

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

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

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

我希望轴被完全移除,这样它就不会出现,并且线条不会受到这个维度的值的影响,但我不想通过操纵数据来做到这一点。我只想操纵情节(这就是我称之为隐藏的原因)。

我已经搜索了 api 描述,但没有找到任何东西。我在互联网上搜索,但也没有找到任何东西。但我想我记得我见过一段代码,第一个轴被隐藏了,但我再也找不到了。
谁能告诉我,我如何隐藏轴或在哪里可以找到解决方案? 谢谢你,问候
琼斯

【问题讨论】:

    标签: javascript d3.js axes parallel-coordinates


    【解决方案1】:

    您缺少.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”图表和代码

    【讨论】:

      【解决方案2】:

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

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

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

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


      别急,但您应该可以复制粘贴上面的行并从控制台http://syntagmatic.github.io/parallel-coordinates/ 运行它,然后在捆绑部分中查看对图表的影响。


      这是效果-分别是之前和之后

      【讨论】:

      • 首先感谢您提供快速的好答案:) 不幸的是,这并不是我所指的。我尝试改进我的问题和图片
      • 不幸的是我还不能添加图片。我会尝试添加一个更好的解释
      猜你喜欢
      • 1970-01-01
      • 2022-07-04
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-05-04
      • 1970-01-01
      相关资源
      最近更新 更多