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")

但发现错误：未捕获的TypeError：x.style不是函数

有什么想法吗？

Answer 1

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

根据您是否要更改线条颜色，文字颜色或所有内容，您可以执行

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

其中*也可以是“text”或“line”。一个注意事项：单个刻度线是<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轴

if error._code == CLError.denied.rawValue { ... }

对于Y轴

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

改变轴颜色凹坑

2 个答案: