CODEWITHSUNDEEP
javascriptd3.jssvg
coderHook
coderHook

Reputation: 57

How to change the data that appear on the axis using D3.js

I am having problems on setting the data that appear on the xAxis. At this momment I am using the Time in seconds, at this point everything is correct and the data is set aright but in the xAxis I would like to have the time in minutes from the first one, instead of the seconds on I calculate the position. I am wondering if it is posible or I have to re-do the xScale.

var xScale = d3.scale.linear()
              .domain([
                d3.min(ds, function(d, i){ return d.Seconds - 100;}),
                d3.max(ds, function(d){ return d.Seconds})     
              ])
              .range([
                w - padding,
                padding + 100,
              ]);
var yScale = d3.scale.linear()
            .domain([
              1 ,
              d3.max(ds, function(d){ return d.Place + 2; })
            ])
            .range([ padding, h - padding ]);

Another question I have is that now, I set a function that makes the name and the dots appear bigger on mouseover, Is it possible to make it both at the same time? this is the piece of code on I have it set, but as I did the dots and the labels separetly I cannot see how to connect them.

var dots = svg.selectAll("circle")
.data(ds)
.enter()
.append("circle")
.attr({
  cx: function(d, i){ return xScale(d.Seconds); },
  cy: function(d){ return yScale(d.Place); },
  r: 5,
  fill: function(d) { return doping(d.Doping);}
})
.on("mouseover", function(d){
d3.select(this).attr({
  r: 7
});
})
.on("mouseout", function(d){
d3.select(this).attr({
  r: 5
})
});

/* - - - Labeling the chart - - - */
var labels = svg.selectAll(".label")
  .data(ds)
  .enter()
  .append("text")
.text(function(d){ return d.Name; })
.attr({
x: function(d){ return xScale(d.Seconds) + 20; },
y: function(d){ return yScale(d.Place)+5;},
"class": "label",
"font-size": "10px",
"font-family": "sans-serif",
"text-anchor": "start",
"fill": "#666666"
})
.on("mouseover", function(d){
d3.select(this).attr({
"font-size": "14px"

});
})
.on("mouseout", function(d){
d3.select(this).attr({
  "font-size": "10px"
})
})
}

CodePen: http://codepen.io/DiazPedroAbel/pen/xEgNrR

Upvotes: 1

Views: 73

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102219

There are several ways for achieving the effect that you ask in your second question ("I set a function that makes the name and the dots appear bigger on mouseover, Is it possible to make it both at the same time?"), such as using groups. I particularly like a different approach, using classes to select all elements I want at once:

First, we set the same class for the circles and the texts:

class: function(d, i){ return (d.Name).split(" ").join("") + i}

Then, inside the mouseover, we retrieve the class:

var thisClass = d3.select(this).attr("class");

And use it for changing both circles and texts.

For your first question, if I understand it correctly (maybe not), you are already showing the time in seconds. So, all you need is to divide it by 60:

var xAxisGen = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")
    .ticks(8)
    .tickFormat(function(d){ return d/60});

Here is your codepen: http://codepen.io/anon/pen/dpvxxb?editors=1010

Upvotes: 1

Related Questions