删除 d3 / dimple 中的刻度线

Question

如何在不删除关联标签的情况下删除刻度线？我想保留标签（"banana" 等），但不保留突出显示的刻度。

Here 类似于 fiddle.

var svg = dimple.newSvg("#chartContainer", 1000, 1000);
var data = [
      { "date" : '2016-01-01', "project" : "Grape", "status" : 1 },
      { "date" : '2016-01-08', "project" : "Grape", "status" : -2 },
      { "date" : '2016-01-07', "project" : "Apple", "status" : 3 },
      { "date" : '2016-01-08', "project" : "Apple", "status" : 1 },
      { "date" : '2016-01-02', "project" : "Banana", "status" : -2 },
      { "date" : '2016-01-15', "project" : "Banana", "status" : 2 },
    ];
var chart = new dimple.chart(svg,data);
chart.setBounds(100, 100, 500, 300);
var x = chart.addCategoryAxis("x", "project");
var y = chart.addTimeAxis("y", "date", "%Y-%m-%d", "%Y-%m-%d");

y.addOrderRule("date");

var lines = chart.addSeries(["project"], dimple.plot.line, [x, y]);

lines.data = data;
lines.lineWeight = 5;
lines.lineMarkers = true;

chart.draw();

Answer 1

我会在 CSS:

.tick line{
  visibility:hidden;
}

基本上所有刻度内的线都可以隐藏。

如果您只想隐藏 x 轴刻度，我会给该轴一个 ID，而不是您现在拥有的 class，而您 css 中有类似这样的内容（这是如果你给它一个 xAxis 的 ID）：

#xAxis.tick line{
      visibility:hidden;
    }

已更新 fiddle：http://jsfiddle.net/thatoneguy/1hotquwf/10/

Answer 2

对于 d3.js v5，使用这个：

axis.tickSize(0)

Related docs

Answer 3

如果您将 D3.js V5 与 DC.js 一起使用，只需使用以下代码：

chart.xAxis().tickSize([0,0]) // First element refer to inner tick, second element refer to outer tick

根据D3's official documentation：

# axis.tickSize([inner, outer])

If inner, outer are specified, sets the inner and outer tick sizes to the specified value and returns the axis. If inner, outer are not specified, returns the current inner tick size, which defaults to 6.

Answer 4

您可以只删除刻度而不将它们保留在 DOM 中。如果我理解得很好的话，你无论如何都不需要它们。通过在 HTML 中保留额外的元素和在 CSS 中保留 classes ，你在视觉上和逻辑上都有不必要的复杂程度。这可能会导致应用程序在几个月内难以加载和维护。

d3.select('#chartContainer').selectAll('.tick').selectAll('line').remove();

这将 select 带有 id='chartContainer' 的图表，然后是带有“勾号”的所有组元素 class，最后是代表勾号的线条元素，并将删除它们。

删除 d3 / dimple 中的刻度线

Remove tick marks in d3 / dimple

d3.js

dimple.js