Question

我有一个Dimple.JS散点图，带有基于时间（以年为单位）的X轴。我希望（以类似于this D3 question的方式）能够在任意区域中着色（理想情况下，开始和结束位置不一定是系列中的数据点）。

是否有一个现有的函数可以让我提供一年并给我X坐标在SVG中的比例上的正确位置，然后我可以使用构造我的矩形（我试图查看源代码）代码来弄清楚凹坑是如何定位的......）？

或者，如果使用已经绘制在图表上的点更实际，那么使用带有凹坑的d3.select访问特定点的正确方法是什么？我的系列有一个日期字段（dd / mm / yyyy）所以我有这样的SVG元素：

<circle id="All_Wed Mar 18 1931 00:00:00 GMT+0000 (GMT)__" class="series0 bubble All Wed_Mar_18_1931_00:00:00_GMT+0000_(GMT) " cx="465.0000000006503" cy="362.1714285714286" r="2" opacity="0.8" fill="#e90e0e" stroke="#c20b0b"></circle>

...我的猜测是我应该使用mySeries.shapes.select（id）来访问它，但是对于：

mySeries.shapes.select("#All_Wed Mar 18 1931 00:00:00 GMT+0000 (GMT)__");

或（如果我逃避它，除非有一个愚蠢的语法错误）：

mySeries.shapes.select("#All_Wed Mar\ 18\ 1931\ 00:00:00\ GMT+0000\ (GMT)__");

我得到“不是有效的选择器”。

（感谢）

Answer 1

您需要使用轴的非公共方法来执行此操作，因此在将来的版本中可能无法以这种方式工作（＆gt; 1.1.5）但是在您和我之间，我不认为缩放方法轴很快就会消失。

_scale方法是在调用图表的draw方法后添加的原始d3比例方法，因此它可以为您转换值。我创造了一个小提琴来说明解决方案。如果您正在处理负值或记录轴，则需要稍微调整一下：

// Draw a simple chart
var svg = dimple.newSvg("body", 800, 600);
var data = [
    { "a":300, "b":2000, "c":"a" },
    { "a":400, "b":3000, "c":"b" },
    { "a":340, "b":2200, "c":"c" },
    { "a":300, "b":5000, "c":"d" }
];
var chart = new dimple.chart(svg, data);
var x = chart.addMeasureAxis("x", "a");
var y = chart.addMeasureAxis("y", "b");
chart.addSeries("c", dimple.plot.bubble);
chart.draw();

// Draw a grey region using the following co-ordinates
var fromX = x._scale(210),
    toX = x._scale(320),
    fromY = y._scale(2200),
    toY = y._scale(3100)

svg.append("rect")
    .attr("x", fromX)
    .attr("y", toY)
    .attr("width", toX - fromX)
    .attr("height", fromY - toY)
    .style("fill", "grey")
    .style("opacity", 0.2);

这是小提琴：http://jsfiddle.net/T6ZDL/7/

dimple.js：获取轴上点/位置的坐标

1 个答案: