Databases
StackOverflow2013
Postsdbo
PONVD3.js Get Data Point's Screen Position Within SVG Chart
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PONVD3.js Get Data Point's Screen Position Within SVG Chart
    primarykey
    data
    text
    <p>I'm using the nvd3.js <a href="http://nvd3.org/ghpages/lineWithFocus.html" rel="nofollow noreferrer">line with focus chart ( view finder )</a> model for a project. There are customizations that i need to add to this example -- such as different types of annotation overlays on top of the graph.</p> <p><img src="https://i.imgur.com/rj1zD98.png" alt="spec"></p> <p>There's a couple ways i can see tackling this:</p> <p><strong>1.</strong> I could extend the nvd3 chart models to create one that does what i need ( that seems like a lot of work at the moment )</p> <p><strong>2.</strong> I can find the right interfaces in the existing nvd3 chart models and write my own d3 stuff to create annotations ( this seemed easier, and so i went down this route )</p> <p>I've figured out most of what i need except how to get the chart's svg screen position for a value from my xScale ( d3.linear.scale() ). Once i have the correct screen position within the nvd3 chart i can make my annotation overlay in the correct spots.</p> <p><strong>Question:</strong> Does anyone know if there's an interface in nvd3 charts to calculate the chart's screen position from an xScale value? If there's no easy interface, how could i solve this problem?</p> <p>Thanks</p> <p><strong>UPDATE:</strong> It looks like i had all the correct information to begin with thanks to Lars' comment. But it wasn't making sense since there seems to be a bug when setting xAxis with dates like this:</p> <pre><code> chart.xAxis .tickFormat(function(d) { return d3.time.format('%Y-%m-%d')(new Date(d)); }); </code></pre> <p>When you try to get the xAxis.scale(), you get a date back instead of the scale function. So it wasn't obvious.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USsudobangbang
    1. USsudobangbang
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COYou should be able to access the scale through `xAxis.scale()`.
      singulars
      1. PONVD3.js Get Data Point's Screen Position Within SVG Chart
      1. USLars Kotthoff
    2. CO@LarsKotthoff: yep, you are right. Though a subtle bug in nvd3.js seems to have kept that conclusion from me for some time. See my update above
      singulars
      1. PONVD3.js Get Data Point's Screen Position Within SVG Chart
      1. USsudobangbang
    3. COYeah, NVD3 does some attribute wrapping of its own that can be confusing at times. I'll add that as an answer anyway for reference.
      singulars
      1. PONVD3.js Get Data Point's Screen Position Within SVG Chart
      1. USLars Kotthoff
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload