CODEWITHSUNDEEP
d3.jszooming
Alban
Alban

Reputation: 3215

How to zoom a d3.js DotsChart instead of lineChart

i want zoom a dot chart like a line but each point are duplicated by zoom step.

g.updateCurve = function(_){
    // Update the line path.
    this.select(".line")
    .attr("d", line);

    // add each point
    this.selectAll('.circle').data(data).enter().append("circle")
    .attr("class", "dot")
    .attr("cx", function(d) {return xScale (d.date); })
    .attr("cy", function(d) {return yScale (d.ySpeed); })
    .attr("r", function(d) {return rScale (d.xSpeed); });

    return this;
};

how can I change for a proper zoom ?

I work on this JSFiddle

Upvotes: 1

Views: 704

Answers (1)

Alban
Alban

Reputation: 3215

it need to costruct DOM.Circle.data before the update fonction:

g.selectAll('circle').data(data).enter().append("circle")
    .attr("class", "dot");

and juste update .attr() on zoom event

// for update Attribute of line and Dots on ZoomEvent
g.updateCurve = function(){
    // Update the line path.
    this.select(".line")
    .attr("d", line);

    // add each point
    this.selectAll('circle')
    .attr("cx", function(d) {return xScale (d.date); })
    .attr("cy", function(d) {return yScale (d.ySpeed); })
    .attr("r", function(d) {return rScale (d.xSpeed); });

    return this;
};

Working exemple on JSFiddle

Upvotes: 2

Related Questions