Question

我在设置xAxis上显示的数据时遇到问题。在这个问题上，我在几秒钟内使用时间，此时一切正确并且数据正确设置但是在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"
})
})
}

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

Answer 1

有几种方法可以实现你在第二个问题中提出的效果（＆＃34;我设置了一个功能，使鼠标悬停时名称和点看起来更大，是否有可能在同时？＆＃34; ），例如使用群组。我特别喜欢一种不同的方法，使用类来一次选择我想要的所有元素：

首先，我们为圈子和文本设置相同的类：

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

然后，在mouseover内，我们检索类：

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

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

1 个答案: