鼠标悬停后X和Y轴消失

时间:2019-03-25 09:48:35

标签: d3.js

我有带缩放和悬停工具提示的d3折线图。Graph looks like this:

一切正常,请做一件事:当我将鼠标悬停在图形上,然后将鼠标拖出绘图时-X和Y轴消失。当鼠标放在图上时,轴再次出现。

document.addEventListener('DOMContentLoaded', function(e) {

var svg = d3.select("#chart"),
    margin = {top: 20, right: 20, bottom: 110, left: 40},
    margin2 = {top: 430, right: 20, bottom: 30, left: 40},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    height2 = +svg.attr("height") - margin2.top - margin2.bottom;

var parseDate = d3.timeParse("%Y-%m-%d %H:%M:%S");
 bisectDate = d3.bisector(function(d) { return d.created_at; }).left;
 formatDate = d3.time.format("%Y-%m-%d %H:%M:%S");






var x = d3.scaleTime().range([0, width]),
    x2 = d3.scaleTime().range([0, width]),
    y = d3.scaleLinear().range([height, 0]),
    y2 = d3.scaleLinear().range([height2, 0]);

var xAxis = d3.axisBottom(x),
    xAxis2 = d3.axisBottom(x2),
    yAxis = d3.axisLeft(y);

var brush = d3.brushX()
    .extent([[0, 0], [width, height2]])
    .on("brush end", brushed);

var zoom = d3.zoom()
    .scaleExtent([1, Infinity])
    .translateExtent([[0, 0], [width, height]])
    .extent([[0, 0], [width, height]])
    .on("zoom", zoomed);

    var line = d3.line()
        .x(function (d) { return x(d.created_at); })
        .y(function (d) { return y(d.temp); });

    var line2 = d3.line()
        .x(function (d) { return x2(d.created_at); })
        .y(function (d) { return y2(d.temp); });

    var clip = svg.append("defs").append("svg:clipPath")
        .attr("id", "clip")
        .append("svg:rect")
        .attr("width", width)
        .attr("height", height)
        .attr("x", 0)
        .attr("y", 0);


    var Line_chart = svg.append("g")
        .attr("class", "focus")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
        .attr("clip-path", "url(#clip)");


    var focus = svg.append("g")
        .attr("class", "focus")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var context = svg.append("g")
    .attr("class", "context")
    .attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");





var data = jsonfile

data.forEach(function(d){
  d.created_at = parseDate(d.created_at);
  d.temp = +d.temp;
});


  x.domain(d3.extent(data, function(d) { return d.created_at; }));
  y.domain([0, d3.max(data, function (d) { return d.temp; })]);
  x2.domain(x.domain());
  y2.domain(y.domain());


    focus.append("g")
        .attr("class", "axis axis--x")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    focus.append("g")
        .attr("class", "axis axis--y")
        .call(yAxis);

    Line_chart.append("path")
        .datum(data)
        .attr("class", "line")
        .attr("d", line);

    context.append("path")
        .datum(data)
        .attr("class", "line")
        .attr("d", line2);


  context.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height2 + ")")
      .call(xAxis2);

  context.append("g")
      .attr("class", "brush")
      .call(brush)
      .call(brush.move, x.range());












    svg.append("rect")
      .attr("class", "zoom")
      .attr("width", width)
      .attr("height", height)
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
      .call(zoom)
      .on("mouseover", function() { focus.style("display", null); })
        .on("mouseout", function() { focus.style("display", "none"); })
        .on("mousemove", mousemove);








        focus.append("line")
        .attr("class", "x")
        .style("stroke", "blue")
        .style("stroke-dasharray", "3,3")
        .style("opacity", 0.5)
        .attr("y1", 0)
        .attr("y2", height);

    // append the y line
    focus.append("line")
        .attr("class", "y")
        .style("stroke", "blue")
        .style("stroke-dasharray", "3,3")
        .style("opacity", 0.5)
        .attr("x1", width)
        .attr("x2", width);

    // append the circle at the intersection
    focus.append("circle")
        .attr("class", "y")
        .style("fill", "none")
        .style("stroke", "blue")
        .attr("r", 4);

    // place the value at the intersection
    focus.append("text")
        .attr("class", "y1")
        .style("stroke", "white")
        .style("stroke-width", "3.5px")
        .style("opacity", 0.8)
        .attr("dx", 8)
        .attr("dy", "-.3em");
    focus.append("text")
        .attr("class", "y2")
        .attr("dx", 8)
        .attr("dy", "-.3em");

    // place the date at the intersection
    focus.append("text")
        .attr("class", "y3")
        .style("stroke", "white")
        .style("stroke-width", "3.5px")
        .style("opacity", 0.8)
        .attr("dx", 8)
        .attr("dy", "1em");
    focus.append("text")
        .attr("class", "y4")
        .attr("dx", 8)
        .attr("dy", "1em");



 function mousemove() {
        var x0 = x.invert(d3.mouse(this)[0]),
            i = bisectDate(data, x0, 1),
            d0 = data[i - 1],
            d1 = data[i],
            d = x0 - d0.created_at > d1.created_at - x0 ? d1 : d0;

        focus.select("circle.y")
            .attr("transform",
                  "translate(" + x(d.created_at) + "," +
                                 y(d.temp) + ")");

        focus.select("text.y1")
            .attr("transform",
                  "translate(" + x(d.created_at) + "," +
                                 y(d.temp) + ")")
            .text(d.temp);

        focus.select("text.y2")
            .attr("transform",
                  "translate(" + x(d.created_at) + "," +
                                 y(d.temp) + ")")
            .text(d.temp);

        focus.select("text.y3")
            .attr("transform",
                  "translate(" + x(d.created_at) + "," +
                                 y(d.temp) + ")")
            .text(formatDate(d.created_at));

        focus.select("text.y4")
            .attr("transform",
                  "translate(" + x(d.created_at) + "," +
                                 y(d.temp) + ")")
            .text(formatDate(d.created_at));

        focus.select(".x")
            .attr("transform",
                  "translate(" + x(d.created_at) + "," +
                                 y(d.temp) + ")")
                       .attr("y2", height - y(d.temp));

        focus.select(".y")
            .attr("transform",
                  "translate(" + width * -1 + "," +
                                 y(d.temp) + ")")
                       .attr("x2", width + width);
    }





  console.log(data);

function brushed() {
  if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return; // ignore brush-by-zoom
  var s = d3.event.selection || x2.range();
  x.domain(s.map(x2.invert, x2));
  Line_chart.select(".line").attr("d", line);
  focus.select(".axis--x").call(xAxis);
  svg.select(".zoom").call(zoom.transform, d3.zoomIdentity
      .scale(width / (s[1] - s[0]))
      .translate(-s[0], 0));
}

function zoomed() {
  if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return; // ignore zoom-by-brush
  var t = d3.event.transform;
  x.domain(t.rescaleX(x2).domain());
  Line_chart.select(".line").attr("d", line);
  focus.select(".axis--x").call(xAxis);
  context.select(".brush").call(brush.move, x.range().map(t.invertX, t));
}
});

没有必要确切地弄清楚这个问题,任何有关导致此问题的原因的想法都会得到赞赏。

1 个答案:

答案 0 :(得分:0)

欢迎使用StackOverflow。我相信问题是因为您使用的是

.on("mouseover", function() { focus.style("display", null); })
.on("mouseout", function() { focus.style("display", "none"); }) 

这是在将鼠标移出时分配给焦点变量(在您的情况下包括轴)的所有内容都设置为display: none,而在您将所有内容都设置为null时。鼠标移到。这并不奇怪,只是被误解了。

不幸的是,不清楚您希望图形做什么,即您希望在问题中的鼠标移动时显示/消失的内容。另外,您还应该为用户提供一些虚拟/样本数据,以重现您的问题。

如果您使用有关您想要的更多详细信息和一些示例数据来更新问题,我可以再为您看一下。更新信息后,只需在下面留下评论。

更新

基于以下注释:如果您想将轴与焦点分开,只需将其分配给其他变量即可。例如:

  1. 声明一个变量并为轴添加一个单独的组:

    var axisg = svg.append("g") //appends a new group for the axis
       .attr("class", "axisg") //assign it a class
       .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // move it appropriately with the margins.
    
  2. 下一步,而不是将轴组件附加到focus变量中,而是将它们分配给axisg变量:

     //append the x and y axis components 
      axisg.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);
    
     axisg.append("g")
      .attr("class", "axis axis--y")
      .call(yAxis);