Question

如何在不删除相关标签的情况下删除刻度线？我想保留标签（＆＃34; banana＆＃34;等），但不是高亮显示的标记。

Here是一个类似的小提琴。

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，而不是你现在拥有的一个类，而你在css中有这样的东西（如果你给它一个xAxis的ID））：

#xAxis.tick line{
      visibility:hidden;
    }

更新了小提琴：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 中保留类，您在视觉和逻辑上都具有不必要的复杂程度。这可能导致应用程序在几个月内难以加载和维护。

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

这将选择带有 id='chartContainer' 的图表，然后是所有带有“tick”类的组元素，最后是代表刻度的线元素并将删除它们。

删除d3 / dimple中的刻度线

4 个答案: