改变轴颜色凹坑

Question

我有一个非常简单的酒窝折线图。我想将 x 和 y 轴颜色更改为白色。

var svg = dimple.newSvg(".line_chart_container", 400, 300),dataset;
var chart = new dimple.chart(svg, dataset);
var x = chart.addCategoryAxis("x", "Attempts");
//x.style ("fill","red")
var y = chart.addMeasureAxis("y", "Value");
y.showGridlines = true;
x.showGridlines = true;
var s = chart.addSeries(["Metric", "Value"], dimple.plot.bubble);
var lines = chart.addSeries("Metric", dimple.plot.line); 
lines.lineWeight = 2;
lines.lineMarkers = true;
chart.assignColor("Metric", "#30D630");
chart.draw();
s.shapes.style("opacity", function (d) {
return (d.yValue === 0 ? 0 : 0.8);
});

我检查了dimple.axis documentation in GitHub，但找不到任何东西。有一个 dimple.axis.colors 属性，但它改变了数据的颜色而不是轴的颜色。酒窝甚至支持这个吗？

我也尝试添加样式属性（如在 D3 中）：

x.style ("fill","red")

但是发现了一个错误：Uncaught TypeError: x.style is not a function

有什么想法吗？

Answer 1

x 不是 d3 选择，而是dimple.axis。您可以使用 shapes 属性访问内部 d3 选择（这是任何凹坑对象的标准）。 here 有一个例子。

根据您是否要更改线条颜色、文本颜色或其他所有内容，您可以这样做

x.shapes.selectAll("*").style("fill", "white")

其中 * 也可以是“文本”或“行”。 注意：各个刻度线是<line> 节点，要更改它们的颜色，您需要使用“描边”，而不是“填充”。 此外，实际的轴线本身不是<line> 元素，而是<path> 元素。所以改变这种颜色是：

x.shapes.select("path.dimple-custom-axis-line").style("stroke", "white");

您也可以手动编写一个 css 规则来覆盖图表的样式：

g.dimple-axis > g.tick > line, g.dimple-axis path.dimple-custom-axis-line {
  stroke:white;
}

Answer 2

对于 X 轴

d3.selectAll("path.domain")[0][0].style.stroke = "red";

Y轴

d3.selectAll("path.domain")[0][1].style.stroke = "yellow";