css - D3.js 特定的勾选样式

标签 css svg d3.js nvd3.js

如果我使用 x [0, 100] 和 y [0,100] 并且我只想为 (0,50) 和 (50,0) 绘制或设计刻度线,是否可以设置特定刻度线的样式?

最佳答案

由 d3 轴函数创建的刻度具有作为数据对象绑定(bind)到它的刻度值。绘制轴后,您可以重新选择刻度并根据其数据对其进行操作。

例如,您可以过滤选择以仅查找具有特定值的刻度。然后您可以应用与任何其他 d3 选择相同的样式或类。

d3.selectAll('g.tick')
  .filter(function(d){ return d==50;} )
   //only ticks that returned true for the filter will be included
   //in the rest of the method calls:
  .select('line') //grab the tick line
  .attr('class', 'quadrantBorder') //style with a custom class and CSS
  .style('stroke-width', 5); //or style directly with attributes or inline styles

更多解释和另一个示例,在属性调用中使用基于数据的函数而不是使用过滤器:
https://stackoverflow.com/a/21583985/3128209

关于css - D3.js 特定的勾选样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21939630/

相关文章:

javascript - 如何在使用 d3 拖动时禁用 mouseover 和 mouseout 事件?

html - 使用 MVC 的布局页面中的动态 Logo 图像

html - 使用路径元素调整 svg 图标的大小

javascript - 与 d3.js 一起使用的 json 字符串操作

svg - SVG中异物的特征检测

html - 使圆形路径从顶部开始

javascript - 等待 d3 加载

jQuery CSS 选择器

html - 元素的垂直对齐不起作用

html - 在自动高度父级内底部对齐图像