CODEWITHSUNDEEP
javascriptd3.js
user3518221
user3518221

Reputation: 97

D3: Resizing x axis and repositioning circles

I've inherited a D3 chart that displays events across a timeline, the events are displayed as circles. To establish the x axis the page uses the following where show_date is a column in a csv file.

x.domain(d3.extent(data, function(d) { return d.show_date; }));

I need to be able to change the timeline to display events from today and the next 4 weeks, next 3, 6 and 12 months. I have a button to call a function

<input class="btn" id="weeks4" type="button" value="Next 4 weeks" onclick="timelineView(28);"/>

and the function that I created is 

// n is the number of days to forward view
function timelineView(n) {

var days = n*24*60*60*1000;

x.domain([new Date(), new Date().getTime()+(days)]);
g.selectAll("g.x-axis")
    .transition()
    .duration(1750)
    .call(d3.axisTop(x));

svg.selectAll("circle")
    .data(MyData)
    .transition()
    .duration(1000)     
    .attr("cx", function(d) { return d.show_date; });
}

It successfully changes the x axis to view the correct amount of time but all of the circles move to the very left of the chart. When I inspect a circle I can see the cx value is a date instead of a number. Elsewhere in the code I found this which is what's used when the chart first loads

.attr("cx", function(d) { return d.data.x; })

so I've tried using that too but the circles stay where they are. How do I make the circles move inline with the updated x axis? I've also been playing with .exit() as there will be less circles to display than when the chart first loads but haven't got anywhere with it.

Upvotes: 1

Views: 382

Answers (1)

KEKUATAN
KEKUATAN

Reputation: 948

Try this

you should check your scale type scaleBand, scaleLinear, scaleTime etc, it must be scaleTime, change the domain to

x.domain([new Date()*1, new Date().getTime()+(days)]);

try console.log this

.attr("cx", function(d) { console.log(d.show_date); return d.show_date; });

if it return date as a date not as number change to

.attr("cx", function(d) { console.log(d.show_date); return new Date(d.show_date)*1 });

if not working, try post some working code, so some one can understand better

if you scale is var x = d3.scaleTime().range([0, width]);

try 

.attr("cx", function(d) { console.log(d.show_date); return x(d.show_date) });

Upvotes: 1

Related Questions