隐藏平行坐标图的轴之一
hide one of the axes of a parallel-coordinates plot
我用平行坐标库表示一些数据(基于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 的描述,但没有找到任何内容。我在互联网上搜索但也没有找到任何东西。但是我想我记得我看过一段和平代码,第一个轴被隐藏了,但我找不到了。
谁能告诉我如何隐藏轴或在哪里可以找到解决方案?
谢谢,问候
琼斯
假设您只想隐藏坐标轴(即使其不可见)而不是完全删除它
d3.selectAll("#example0 > svg > g > g.dimension:nth-child(3)").attr("opacity", "0");
假设 example0 是 svg 元素周围的包装器的 ID。如果有的话,您也可以直接在 svg 元素上做同样的事情。
以上内容仍然可以让您与隐藏轴的过滤器进行交互。要使其不可交互,请使用 .attr("display", "none");
没有 fiddle,但您应该可以从位于 http://syntagmatic.github.io/parallel-coordinates/ 的控制台复制粘贴上面的行和 运行 并在图表上查看效果在捆绑部分。
这是效果——前后分别
您缺少 .hideAxis(array)
方法调用,其中数组是您要隐藏的数据集中确切列名的键列表。此方法完全符合您的要求:
- "...隐藏平行坐标的一个特定轴;我只是不想显示它。"
- "I want that the axis is completley [sic] removed, so that it takes no place"
- "the lines dont [sic] be affected of the values of this dimension, but i don´t want to do that by manupulating [sic] the data. i only want to manipulate the plot."
要实现此方法,您的代码需要
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([])
如果您想允许用户指定要删除的轴,您可以在某种 update/redraw 函数中实现此方法;否则,不可能通过 DOM 完全删除它。 通过代码执行轴隐藏,这是您实现所需功能的唯一选择。
要查看此方法的实际效果,请查看 API 文档,具体来说,它们的 "example1" 图和代码位于 http://syntagmatic.github.io/parallel-coordinates/index.html#example1
我用平行坐标库表示一些数据(基于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 的描述,但没有找到任何内容。我在互联网上搜索但也没有找到任何东西。但是我想我记得我看过一段和平代码,第一个轴被隐藏了,但我找不到了。
谁能告诉我如何隐藏轴或在哪里可以找到解决方案?
谢谢,问候
琼斯
假设您只想隐藏坐标轴(即使其不可见)而不是完全删除它
d3.selectAll("#example0 > svg > g > g.dimension:nth-child(3)").attr("opacity", "0");
假设 example0 是 svg 元素周围的包装器的 ID。如果有的话,您也可以直接在 svg 元素上做同样的事情。
以上内容仍然可以让您与隐藏轴的过滤器进行交互。要使其不可交互,请使用 .attr("display", "none");
没有 fiddle,但您应该可以从位于 http://syntagmatic.github.io/parallel-coordinates/ 的控制台复制粘贴上面的行和 运行 并在图表上查看效果在捆绑部分。
这是效果——前后分别
您缺少 .hideAxis(array)
方法调用,其中数组是您要隐藏的数据集中确切列名的键列表。此方法完全符合您的要求:
- "...隐藏平行坐标的一个特定轴;我只是不想显示它。"
- "I want that the axis is completley [sic] removed, so that it takes no place"
- "the lines dont [sic] be affected of the values of this dimension, but i don´t want to do that by manupulating [sic] the data. i only want to manipulate the plot."
要实现此方法,您的代码需要
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([])
如果您想允许用户指定要删除的轴,您可以在某种 update/redraw 函数中实现此方法;否则,不可能通过 DOM 完全删除它。 通过代码执行轴隐藏,这是您实现所需功能的唯一选择。
要查看此方法的实际效果,请查看 API 文档,具体来说,它们的 "example1" 图和代码位于 http://syntagmatic.github.io/parallel-coordinates/index.html#example1