Manjunath Manjunath - 1 year ago 108
Javascript Question

How to create X and y Intersect chart using d3js?

I have an data which show the performance of user and competency which is y and x axis respectively. Where its scaled from 1 to 10. I want to create an intersection point using d3js but as a beginner im having no idea where to start.

Answer Source

To create a dot at that point, you simply need to draw a new circle on the point of intersection. Here is a JSFiddle of a VERY simple graph with comments to make it easier to understand. The dots are drawn from data. The important piece for you is

.append("svg:circle")
.attr("cy", function(d) {
    return y(d.y);
  })
  .attr("cx", function(d, i) {
    return x(d.x);
  })
.attr("r", 10)

which creates an svg circle, places it on the data point's x and y coordinates, and gives it a radius of 10. A more simplified version which might be easier to use for your application (because I don't know how your data is stored) is to feed in the data manually

.append("svg:circle")
.attr("cy", x(5))
.attr("cx", y(6))
.attr("r", 10)

This will create a single data point at 5,6 with a radius of 10. Note that this is using the scaling functions x() and y() to convert the data point 5,6 to pixel values

var x = d3.scale.linear()
  .domain([0, 10])
  .range([0, width]);
var y = d3.scale.linear()
  .domain([0, 10])
  .range([height, 0]);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download