Question

在d3 js中，我按照线图可缩放的图形链接jsfiddle.net/KSAbK/1/在此线图中我想要显示像this一样的点。我该怎么做？

更新后代码点可见但是当我滚动图形点固定在给定位置时，下面是我的缩放功能

function zoomed() {
console.log(d3.event.translate);
console.log(d3.event.scale);
svg.select(".x.axis").call(xAxis);
svg.select(".y.axis").call(yAxis);
svg.select(".x.grid")
    .call(make_x_axis()
    .tickSize(-height, 0, 0)
    .tickFormat(""));
svg.select(".y.grid")
    .call(make_y_axis()
    .tickSize(-width, 0, 0)
    .tickFormat(""));
svg.select(".line")
    .attr("class", "line")
    .attr("d", line);
  svg.selectAll(".dot")
 .data(data)
 .enter().append("rect")
 .attr("class","dot")
 .attr("height",7)
 .attr("width",7)
 .attr("x", function(d) { return x(d.date); })
 .attr("y", function(d) { return y(d.value); });
 }

Answer 1

您需要在有数据点的地方添加圈子。圆圈可以很小，并在鼠标上方生长或改变颜色。您可以使用

为图表添加圆圈

// Append circles to the chart
var circles = chartBody.selectAll('circle')
    .data(data)
    .attr('cx', function(d) { return x(d.date); })
    .attr('cy', function(d) { return y(d.value); })
    .attr('r', 10)
    .attr('fill', 'blue');

绘制路径后绘制点，因此它们不会被线条隐藏。的问候，

Answer 2

如果您没有使用动画，请先使用

删除旧圆圈

d3.selectAll(".dot").remove();

OR

 svg.selectAll(".dot").remove();

根据您的要求重新绘制，因此您的代码可能如下所示。

function zoomed(zoomlevel) {
console.log(d3.event.translate);
console.log(d3.event.scale);
svg.select(".x.axis").call(xAxis);
svg.select(".y.axis").call(yAxis);
svg.select(".x.grid")
    .call(make_x_axis()
    .tickSize(-height, 0, 0)
    .tickFormat(""));
svg.select(".y.grid")
    .call(make_y_axis()
    .tickSize(-width, 0, 0)
    .tickFormat(""));
svg.select(".line")
    .attr("class", "line")
    .attr("d", line);

svg.selectAll(".dot").remove();

svg.selectAll(".dot")
    .data(data)
    .enter().append("circle")
    .attr('cx', function(d) { return x(d.date); })
    .attr('cy', function(d) { return y(d.value); })
    .attr('r', zoomlevel*10)  //zoomlevel can be -2,-1,1,2... except zero
    .attr('fill', 'blue');

}

D3 js折线图显示鼠标悬停和鼠标移出时的点

2 个答案: