CODEWITHSUNDEEP
d3.jsdimple.js
William Turrell
William Turrell

Reputation: 3328

dimple.js: get co-ordinates of point/position on axis

I have a Dimple.JS scatter plot with a time-based (in years) X-axis. I'd like (in a similar manner to this D3 question) to be able to shade in an arbitrary area (ideally the start and end positions wouldn't necessarily be data points in the series).

Is there an existing function that will let me supply a year and give me the X co-ordinate the correct position on the scale in the SVG, which I can then use the construct my rectangle (I tried to look at the source code to figure out how dimple does it's positioning...)?

Alternatively, if it's more practical to use points already plotted on the chart, what's the correct way to use d3.select with dimple to access a specific one? My series has a date field (dd/mm/yyyy) so I have SVG elements like this:

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

… my guess was I should use mySeries.shapes.select(id) to access that, but for:

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

or (if I escape it, unless there's a silly syntax error):

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

I get "Not a valid selector".

(Thanks)

Upvotes: 0

Views: 1023

Answers (1)

John Kiernander
John Kiernander

Reputation: 4904

You need to use a non-public method of the axes to do this, so it may not work this way in future versions (>1.1.5) however between you and me, I don't think the scale method of the axis is going to be disappearing any time soon.

The _scale method is the raw d3 scale method added once the draw method of the chart is called so it can convert the values for you. I've created a fiddle to illustrate the solution. This will need a little tweaking if you are dealing with negative values or log axes:

// 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);

Here's the fiddle: http://jsfiddle.net/T6ZDL/7/

Upvotes: 1

Related Questions