Question

您好我修改了几个Intent i = new Intent(ContactsMain.this, AddContact.class);演示项目以满足我的要求。但面临的问题很少。这是d3.js https://jsfiddle.net/dibyendu/fmtygLfv/ 使用范围选择器，我的jsfiddle不会过滤它们保持相同的状态。此外tooltips未正确放置，我无法将tooltips放入我的special character中，例如X-axis至0.1但1.0是0.0-0.1 to 0.9-1.0不工作

Answer 1

首先，对于散点图，您将附加到svg。您需要追加创建路径的相同区域。所以不是（在第110行）：

svg.selectAll("dot")

做：

focus.selectAll("dot")

更新了小提琴：https://jsfiddle.net/thatoneguy/fmtygLfv/2/

关于点（工具提示）。我把点的创建放在这样的函数中：

// Add the scatterplot

 function addScatter(){

        focus.selectAll(".dot").data(data)          
        .enter().append("circle").attr('class','dot')                               
        .attr("r", 5)       
        .attr("cx", function(d) { return x(d.date); })       
        .attr("cy", function(d) { return y(d.price); })     
        .on("mouseover", function(d) {      
            div.transition()        
                .duration(200)      
                .style("opacity", .9);      
            div .html(d.date + "<br/>"  + d.price)  
                .style("left", (d3.event.pageX) + "px")     
                .style("top", (d3.event.pageY - 28) + "px");    
            })                  
        .on("mouseout", function(d) {       
            div.transition()        
                .duration(500)      
                .style("opacity", 0);   
        });
        }
addScatter()

立即实例化。现在这可以在你刷的时候使用。更新了刷子：

function brushed() {
  x.domain(brush.empty() ? x2.domain() : brush.extent());
  focus.select(".area").attr("d", area);
  focus.select(".x.axis").call(xAxis);
  focus.selectAll(".dot").remove()  ; //remove current dots
  addScatter()
}

在致电addScatter之前请注意我删除了已存在的点。现在效果很好。

更新了小提琴：https://jsfiddle.net/thatoneguy/fmtygLfv/5/

关于你的刻度值。请看这个例子：D3 - using strings for axis ticks

目前，您的数据显示的日期范围为0.2 - 1.0。它们是单个值，而不是它们自己的范围。

因此，如果您的数据如下所示：

var data =  [{ "date":"0.1-0.2",  "price":394.46}, 
  { "date":"0.2-0.3",  "price":1366.42}, 
  { "date":"0.3-0.4",  "price":1498.58}, 
  { "date":"0.4-0.5",  "price":1452.43},//and so on

您可以使用上面的示例中的刻度值，如下所示：

.tickFormat(function(d, i){
    return d.date; // this will return (if data is edited) 0.1-0.2, 0.2-0.3 and so on
})

这意味着要编辑您的数据。

d3.js范围选择器不过滤工具提示

1 个答案: