改变轴颜色酒窝

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. You can access the inner d3 selection with the shapes property (which is standard for any dimple object). There is an example of that here.

取决于您是要更改线条颜色、文本颜色还是其他所有内容，您会这样做

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

其中 * 也可以是 "text" 或 "line"。请注意：单个刻度线是 <line> 个节点，要更改它们的颜色，您需要使用 'stroke'，而不是 'fill'。此外，实际轴线本身不是 <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";

改变轴颜色酒窝

change axis color dimple

d3.js

dimple.js