javascript - 如何使用 D3.js 更改轴上显示的数据

Question

我在设置 x 轴上显示的数据时遇到问题。此时我正在使用以秒为单位的时间，此时一切都是正确的并且数据设置正确，但在 xAxis 中我希望从第一个轴开始以分钟为单位的时间，而不是我计算位置的秒数。我想知道这是否可行，或者我必须重新进行 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 ]);

我的另一个问题是，现在我设置了一个函数，可以使名称和点在鼠标悬停时显示得更大，是否可以同时使其两者都显示出来？这是我设置的一段代码，但是当我分别设置点和标签时，我看不到如何连接它们。

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"
})
})
} 

代码笔:http://codepen.io/DiazPedroAbel/pen/xEgNrR

Answer 1

有几种方法可以实现您在第二个问题中提出的效果(“我设置了一个函数，使名称和点在鼠标悬停时显得更大，是否可以同时使其两者?")，例如使用组。我特别喜欢一种不同的方法，使用类一次选择我想要的所有元素:

首先，我们为圆​​圈和文本设置相同的类:

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

然后，在鼠标悬停内，我们检索该类:

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

并用它来更改圆圈和文本。

对于你的第一个问题，如果我理解正确(也许没有)，你已经以秒为单位显示时间。因此，您只需将其除以 60:

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

这是您的代码笔:http://codepen.io/anon/pen/dpvxxb?editors=1010