Question

我在下面的代码中包含了一个悬停工具提示到每个圆圈。这个问题是，当我附加圆圈时，我将返回lat / long数据列。似乎工具提示仅适用于当前正在加载的数据列。

我还想在工具提示中显示其他数据列（城市，州等），但我不知道如何将这些列调用到代码中。

总结一下，我想将d.state（我的数据集中的一个单独的列）调用到

"div.html(d.lng + "<br>" + d.lat)"




  d3.tsv("data/read_666.txt")
    .row(function(d) {
      return {
        permalink: d.permalink,
        lat: parseFloat(d.lat),
        lng: parseFloat(d.long),
        city: d.city,
        state: d.state,
        created_at: moment(d.created_at,"YYYY-MM-DD HH:mm:ss")
            };
    })
    .get(function(err, rows) {
        if (err) return console.error(err);

      window.site_data = rows;
    });
});



//display the sites using "permalink"
var displaySites = function(data) {
  var sites = svg.selectAll(".site")
  .data(data, function(d) {
    return d.permalink;
  });

sites.enter().append("circle")
  .attr("class", "site")
  .attr("cx", function(d) {
    return projection([d.lng, d.lat])[0];
        })
  .attr("cy", function(d) {
    return projection([d.lng, d.lat])[1];
        })
            .on("mouseover", function(d) {
                 div.transition()
                         .duration(200)
                         .style("opacity", .9);
                 div.html("State" + d.state)
                         .style("left", (d3.event.pageX) + "px")
                         .style("top", (d3.event.pageY - 28) + "px");
                 })
         .on("mouseout", function(d) {
                 div.transition()
                         .duration(500)
                         .style("opacity", 0);
         })
        .attr("r", 1)
        .transition().duration(400)
            .attr("r", 7);


sites.exit()
.transition().duration(300)
  .attr("r",0)
  .remove();
 };

Answer 1

解：不得不用正确的变量更新d3.tsv（），因此需要添加＆＃34; state：d.state＆＃34;，以使其工作。然后我可以在工具提示代码上重新调用它

根据不同的数据列

1 个答案: