堆栈内存溢出
  繁体   English   中英

d3 js栏鼠标悬停

[英]d3 js bar mouseover

 原文  2016-02-05 10:52:18  6   2    javascript/ d3.js/ bar-chart/ mouseover

问题描述

我需要帮助来显示带有bar中所有值的工具提示，例如：arrancado：1 parado：3 trabajo1：3 trabajo2：2在这里，我将使用实际代码。 

<!DOCTYPE html>
<html>
    <head>
    <script src="d3.min.js"></script> 
        <style>
        </style>             
    </head>
    <body>
<div id="asd">
<hr></hr>
</div>
        <script type="text/javascript">
      var data = [{
    "dia": 1,
        "arrancado": 3,
        "parado": 2,
        "trabajo1": 1,
        "trabajo2": 3
}, {
        "dia": 2,
        "critical": 6,
        "arrancado": 3,
        "trabajo1": 2,
        "parado": 5,
        "trabajo2": 3
}, {
    "dia": 3,
        "critical": 2,
        "arrancado": 13,
        "parado": 1,
        "trabajo1": 2,
        "trabajo2": 2
}, {
    "dia": 4,
        "arrancado": 8,
        "parado": 3,
        "trabajo1": 3,
        "trabajo2": 2
},
{
    "dia": 5,
        "arrancado": 8,
        "parado": 3,
        "trabajo1": 3,
        "trabajo2": 2
},{
    "dia": 6,
        "arrancado": 0,
        "parado": 0,
        "trabajo1": 0,
        "trabajo2": 0
},{
    "dia": 8,
        "arrancado": 0,
        "parado": 0,
        "trabajo1": 0,
        "trabajo2": 0
},{
    "dia": 8,
        "arrancado": 0,
        "parado": 0,
        "trabajo1": 0,
        "trabajo2": 0
},{
    "dia": 9,
        "arrancado": 8,
        "parado": 3,
        "trabajo1": 3,
        "trabajo2": 2
},{
    "dia": 10,
        "arrancado": 8,
        "parado": 3,
        "trabajo1": 3,
        "trabajo2": 2
},{
    "dia": 11,
        "arrancado": 8,
        "parado": 3,
        "trabajo1": 3,
        "trabajo2": 2
},{
    "dia": 12,
        "arrancado": 8,
        "parado": 3,
        "trabajo1": 3,
        "trabajo2": 2
},{
    "dia": 13,
        "arrancado": 8,
        "parado": 3,
        "trabajo1": 3,
        "trabajo2": 2
},{
    "dia": 14,
        "arrancado": 8,
        "parado": 3,
        "trabajo1": 3,
        "trabajo2": 2
},{
    "dia": 15,
        "arrancado": 8,
        "parado": 3,
        "trabajo1": 3,
        "trabajo2": 2
},{
    "dia": 16,
        "arrancado": 8,
        "parado": 3,
        "trabajo1": 3,
        "trabajo2": 2
},{
    "dia": 17,
        "arrancado": 8,
        "parado": 3,
        "trabajo1": 3,
        "trabajo2": 2
},{
    "dia": 18,
        "arrancado": 8,
        "parado": 3,
        "trabajo1": 3,
        "trabajo2": 2
},{
    "dia": 19,
        "arrancado": 8,
        "parado": 3,
        "trabajo1": 3,
        "trabajo2": 2
},{
    "dia": 20,
        "arrancado": 8,
        "parado": 3,
        "trabajo1": 3,
        "trabajo2": 2
},{
    "dia": 21,
        "arrancado": 8,
        "parado": 3,
        "trabajo1": 3,
        "trabajo2": 2
},{
    "dia": 22,
        "arrancado": 8,
        "parado": 3,
        "trabajo1": 3,
        "trabajo2": 2
},{
    "dia": 23,
        "arrancado": 8,
        "parado": 3,
        "trabajo1": 3,
        "trabajo2": 2
},{
    "dia": 24,
        "arrancado": 8,
        "parado": 3,
        "trabajo1": 3,
        "trabajo2": 2
},{
    "dia": 25,
        "arrancado": 8,
        "parado": 3,
        "trabajo1": 3,
        "trabajo2": 2
},{
    "dia": 26,
        "arrancado": 8,
        "parado": 3,
        "trabajo1": 3,
        "trabajo2": 2
},{
    "dia": 27,
        "arrancado": 8,
        "parado": 3,
        "trabajo1": 3,
        "trabajo2": 2
},{
    "dia": 28,
        "arrancado": 8,
        "parado": 3,
        "trabajo1": 3,
        "trabajo2": 2
},{
    "dia": 29,
        "arrancado": 5,
        "parado": 1,
        "trabajo1": 3,
        "trabajo2": 2
},{
    "dia": 30,
        "arrancado": 8,
        "parado": 3,
        "trabajo1": 3,
        "trabajo2": 2
},{
    "dia": 31,
        "arrancado": 1,
        "parado": 3,
        "trabajo1": 3,
        "trabajo2": 2
}];

var margin = {
    top: 0,
    right: 0,
    bottom: 0,
    left: 0
},
width = 8*31 - margin.left - margin.right,
    height = 100 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);

var y = d3.scale.linear()
    .rangeRound([height, 0]);

 var color = d3.scale.ordinal()
     .range(["green", "gray", "blue"]);


var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(d3.format(".2s"));

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

color.domain(d3.keys(data[0]).filter(function (key) {
    return key !== "dia";
}));

data.forEach(function (d) {
    var y0 = 0;
    d.ages = color.domain().map(function (name) {
        return {
            name: name,
            y0: y0,
            y1: y0 += +d[name]
        };
    });
    d.total = d.ages[d.ages.length - 1].y1;
});


x.domain(data.map(function (d) {
    return d.dia;
}));
y.domain([0, 24]);

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


var dia = svg.selectAll(".dia")
    .data(data)
    .enter().append("g")
    .attr("class", "g")
    .attr("transform", function (d) {
    return "translate(" + x(d.dia) + ",0)";
});

dia.selectAll("rect")
    .data(function (d) {
    return d.ages;
})
    .enter().append("rect")
    .attr("width", x.rangeBand())
    .attr("y", function (d) {
    return y(d.y1);
})
    .attr("height", function (d) {
    return y(d.y0) - y(d.y1);
})
    .style("fill", function (d) {
    return color(d.name);
});



        </script>

    </body>
</html>

我试图从谷歌的例子来实现，但我都失败了。

2 个解决方案

解决方案1
 2 已采纳  2016-02-05 12:11:15

尝试这种方式。

1）创建一个工具提示div，并默认将其设置为隐藏。 

var tooltip = d3.select("body")
  .append("div")
  .style("position", "absolute")
  .style("z-index", "10")
  .style("visibility", "hidden")
  .text("a simple tooltip");

2）在鼠标悬停时更新内容并显示工具提示div。 

 dia.on("mouseover", function(d, i) {
        var notNeeded = ["dia", "total", "ages"];

        var keys = Object.keys(d);
        keys = keys.filter(function(s) {
          return notNeeded.indexOf(s) == -1
        });

        tooltip.html(keys.map(function(k) {
          return k + ":" + d[k]
        }).join("<br/>"));
        return tooltip.style("visibility", "visible");
      })
      .on("mousemove", function() {
        return tooltip.style("top", (d3.event.pageY - 10) + "px").style("left", (d3.event.pageX + 10) + "px");
      })
      .on("mouseout", function() {
        return tooltip.style("visibility", "hidden");
      });


 var data = [{ "dia": 1, "arrancado": 3, "parado": 2, "trabajo1": 1, "trabajo2": 3 }, { "dia": 2, "critical": 6, "arrancado": 3, "trabajo1": 2, "parado": 5, "trabajo2": 3 }, { "dia": 3, "critical": 2, "arrancado": 13, "parado": 1, "trabajo1": 2, "trabajo2": 2 }, { "dia": 4, "arrancado": 8, "parado": 3, "trabajo1": 3, "trabajo2": 2 }, { "dia": 5, "arrancado": 8, "parado": 3, "trabajo1": 3, "trabajo2": 2 }, { "dia": 6, "arrancado": 0, "parado": 0, "trabajo1": 0, "trabajo2": 0 }, { "dia": 8, "arrancado": 0, "parado": 0, "trabajo1": 0, "trabajo2": 0 }, { "dia": 8, "arrancado": 0, "parado": 0, "trabajo1": 0, "trabajo2": 0 }, { "dia": 9, "arrancado": 8, "parado": 3, "trabajo1": 3, "trabajo2": 2 }, { "dia": 10, "arrancado": 8, "parado": 3, "trabajo1": 3, "trabajo2": 2 }, { "dia": 11, "arrancado": 8, "parado": 3, "trabajo1": 3, "trabajo2": 2 }, { "dia": 12, "arrancado": 8, "parado": 3, "trabajo1": 3, "trabajo2": 2 }, { "dia": 13, "arrancado": 8, "parado": 3, "trabajo1": 3, "trabajo2": 2 }, { "dia": 14, "arrancado": 8, "parado": 3, "trabajo1": 3, "trabajo2": 2 }, { "dia": 15, "arrancado": 8, "parado": 3, "trabajo1": 3, "trabajo2": 2 }, { "dia": 16, "arrancado": 8, "parado": 3, "trabajo1": 3, "trabajo2": 2 }, { "dia": 17, "arrancado": 8, "parado": 3, "trabajo1": 3, "trabajo2": 2 }, { "dia": 18, "arrancado": 8, "parado": 3, "trabajo1": 3, "trabajo2": 2 }, { "dia": 19, "arrancado": 8, "parado": 3, "trabajo1": 3, "trabajo2": 2 }, { "dia": 20, "arrancado": 8, "parado": 3, "trabajo1": 3, "trabajo2": 2 }, { "dia": 21, "arrancado": 8, "parado": 3, "trabajo1": 3, "trabajo2": 2 }, { "dia": 22, "arrancado": 8, "parado": 3, "trabajo1": 3, "trabajo2": 2 }, { "dia": 23, "arrancado": 8, "parado": 3, "trabajo1": 3, "trabajo2": 2 }, { "dia": 24, "arrancado": 8, "parado": 3, "trabajo1": 3, "trabajo2": 2 }, { "dia": 25, "arrancado": 8, "parado": 3, "trabajo1": 3, "trabajo2": 2 }, { "dia": 26, "arrancado": 8, "parado": 3, "trabajo1": 3, "trabajo2": 2 }, { "dia": 27, "arrancado": 8, "parado": 3, "trabajo1": 3, "trabajo2": 2 }, { "dia": 28, "arrancado": 8, "parado": 3, "trabajo1": 3, "trabajo2": 2 }, { "dia": 29, "arrancado": 5, "parado": 1, "trabajo1": 3, "trabajo2": 2 }, { "dia": 30, "arrancado": 8, "parado": 3, "trabajo1": 3, "trabajo2": 2 }, { "dia": 31, "arrancado": 1, "parado": 3, "trabajo1": 3, "trabajo2": 2 }]; var margin = { top: 0, right: 0, bottom: 20, left: 0 }, width = 8 * 31 - margin.left - margin.right, height = 100 - margin.top - margin.bottom; var x = d3.scale.ordinal() .rangeRoundBands([0, width], .1); var y = d3.scale.linear() .rangeRound([height, 0]); var color = d3.scale.ordinal() .range(["green", "gray", "blue"]); var xAxis = d3.svg.axis() .scale(x) .orient("bottom"); var yAxis = d3.svg.axis() .scale(y) .orient("left") .tickFormat(d3.format(".2s")); var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var tooltip = d3.select("body") .append("div") .attr("class", "tooltip") .style("position", "absolute") .style("z-index", "10") .style("visibility", "hidden") .text("a simple tooltip"); color.domain(d3.keys(data[0]).filter(function(key) { return key !== "dia"; })); data.forEach(function(d) { var y0 = 0; d.ages = color.domain().map(function(name) { return { name: name, y0: y0, y1: y0 += +d[name] }; }); d.total = d.ages[d.ages.length - 1].y1; }); x.domain(data.map(function(d) { return d.dia; })); y.domain([0, 24]); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); var dia = svg.selectAll(".dia") .data(data) .enter().append("g") .attr("class", "g") .attr("transform", function(d) { return "translate(" + x(d.dia) + ",0)"; }); dia.selectAll("rect") .data(function(d) { return d.ages; }) .enter().append("rect") .attr("width", x.rangeBand()) .attr("y", function(d) { return y(d.y1); }) .attr("height", function(d) { return y(d.y0) - y(d.y1); }) .style("fill", function(d) { return color(d.name); }); dia.on("mouseover", function(d, i) { var notNeeded = ["dia", "total", "ages"]; var keys = Object.keys(d); keys = keys.filter(function(s) { return notNeeded.indexOf(s) == -1 }); tooltip.html(keys.map(function(k) { return "<b>" + k + "</b> : " + d[k] }).join("<br/>")); return tooltip.style("visibility", "visible"); }) .on("mousemove", function() { return tooltip.style("top", (d3.event.pageY - 10) + "px").style("left", (d3.event.pageX + 10) + "px"); }) .on("mouseout", function() { return tooltip.style("visibility", "hidden"); }); 
 .tooltip { background-color: grey; color: black; border-radius: 2px; padding: 2px; } g.tick text { font-size: 8px; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

解决方案2
 0  2016-02-05 12:07:26

这个例子对我有用。

  1. 包含工具提示库
  2. 添加了d3.tip（）方法和svg.call（tip）
  3. 包含工具提示CSS
  4. 在mouseover和mouseout侦听器上添加了rect以显示/隐藏示例中提到的提示。 

 body { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } .bar { fill: orange; } .bar:hover { fill: orangered ; } .x.axis path { display: none; } .d3-tip { line-height: 1; font-weight: bold; padding: 12px; background: rgba(0, 0, 0, 0.8); color: #fff; border-radius: 2px; } /* Creates a small triangle extender for the tooltip */ .d3-tip:after { box-sizing: border-box; display: inline; font-size: 10px; width: 100%; line-height: 1; color: rgba(0, 0, 0, 0.8); content: "\\25BC"; position: absolute; text-align: center; } /* Style northward tooltips differently */ .d3-tip.n:after { margin: -1px 0 0 0; top: 100%; left: 0; } 
 <!DOCTYPE html> <html> <head> <script src="http://d3js.org/d3.v3.min.js"></script> <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script> <style> </style> </head> <body> <div id="asd"> <hr></hr> </div> <script type="text/javascript"> var tip = d3.tip() .attr('class', 'd3-tip') .offset([-10, 0]) .html(function(d) { console.log(d); return "<strong>"+ d.name +":</strong> <span style='color:red'>" + (d.y1 - d.y0) + "</span>"; }); var data = [{ "dia": 1, "arrancado": 3, "parado": 2, "trabajo1": 1, "trabajo2": 3 }, { "dia": 2, "critical": 6, "arrancado": 3, "trabajo1": 2, "parado": 5, "trabajo2": 3 }, { "dia": 3, "critical": 2, "arrancado": 13, "parado": 1, "trabajo1": 2, "trabajo2": 2 }, { "dia": 4, "arrancado": 8, "parado": 3, "trabajo1": 3, "trabajo2": 2 }, { "dia": 5, "arrancado": 8, "parado": 3, "trabajo1": 3, "trabajo2": 2 },{ "dia": 6, "arrancado": 0, "parado": 0, "trabajo1": 0, "trabajo2": 0 },{ "dia": 8, "arrancado": 0, "parado": 0, "trabajo1": 0, "trabajo2": 0 },{ "dia": 8, "arrancado": 0, "parado": 0, "trabajo1": 0, "trabajo2": 0 },{ "dia": 9, "arrancado": 8, "parado": 3, "trabajo1": 3, "trabajo2": 2 },{ "dia": 10, "arrancado": 8, "parado": 3, "trabajo1": 3, "trabajo2": 2 },{ "dia": 11, "arrancado": 8, "parado": 3, "trabajo1": 3, "trabajo2": 2 },{ "dia": 12, "arrancado": 8, "parado": 3, "trabajo1": 3, "trabajo2": 2 },{ "dia": 13, "arrancado": 8, "parado": 3, "trabajo1": 3, "trabajo2": 2 },{ "dia": 14, "arrancado": 8, "parado": 3, "trabajo1": 3, "trabajo2": 2 },{ "dia": 15, "arrancado": 8, "parado": 3, "trabajo1": 3, "trabajo2": 2 },{ "dia": 16, "arrancado": 8, "parado": 3, "trabajo1": 3, "trabajo2": 2 },{ "dia": 17, "arrancado": 8, "parado": 3, "trabajo1": 3, "trabajo2": 2 },{ "dia": 18, "arrancado": 8, "parado": 3, "trabajo1": 3, "trabajo2": 2 },{ "dia": 19, "arrancado": 8, "parado": 3, "trabajo1": 3, "trabajo2": 2 },{ "dia": 20, "arrancado": 8, "parado": 3, "trabajo1": 3, "trabajo2": 2 },{ "dia": 21, "arrancado": 8, "parado": 3, "trabajo1": 3, "trabajo2": 2 },{ "dia": 22, "arrancado": 8, "parado": 3, "trabajo1": 3, "trabajo2": 2 },{ "dia": 23, "arrancado": 8, "parado": 3, "trabajo1": 3, "trabajo2": 2 },{ "dia": 24, "arrancado": 8, "parado": 3, "trabajo1": 3, "trabajo2": 2 },{ "dia": 25, "arrancado": 8, "parado": 3, "trabajo1": 3, "trabajo2": 2 },{ "dia": 26, "arrancado": 8, "parado": 3, "trabajo1": 3, "trabajo2": 2 },{ "dia": 27, "arrancado": 8, "parado": 3, "trabajo1": 3, "trabajo2": 2 },{ "dia": 28, "arrancado": 8, "parado": 3, "trabajo1": 3, "trabajo2": 2 },{ "dia": 29, "arrancado": 5, "parado": 1, "trabajo1": 3, "trabajo2": 2 },{ "dia": 30, "arrancado": 8, "parado": 3, "trabajo1": 3, "trabajo2": 2 },{ "dia": 31, "arrancado": 1, "parado": 3, "trabajo1": 3, "trabajo2": 2 }]; var margin = { top: 0, right: 0, bottom: 0, left: 0 }, width = 8*31 - margin.left - margin.right, height = 100 - margin.top - margin.bottom; var x = d3.scale.ordinal() .rangeRoundBands([0, width], .1); var y = d3.scale.linear() .rangeRound([height, 0]); var color = d3.scale.ordinal() .range(["green", "gray", "blue"]); var xAxis = d3.svg.axis() .scale(x) .orient("bottom"); var yAxis = d3.svg.axis() .scale(y) .orient("left") .tickFormat(d3.format(".2s")); var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); svg.call(tip); color.domain(d3.keys(data[0]).filter(function (key) { return key !== "dia"; })); data.forEach(function (d) { var y0 = 0; d.ages = color.domain().map(function (name) { return { name: name, y0: y0, y1: y0 += +d[name] }; }); d.total = d.ages[d.ages.length - 1].y1; }); x.domain(data.map(function (d) { return d.dia; })); y.domain([0, 24]); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); var dia = svg.selectAll(".dia") .data(data) .enter().append("g") .attr("class", "g") .attr("transform", function (d) { return "translate(" + x(d.dia) + ",0)"; }); dia.selectAll("rect") .data(function (d) { return d.ages; }) .enter().append("rect") .attr("width", x.rangeBand()) .on('mouseover', tip.show) .on('mouseout', tip.hide) .attr("y", function (d) { return y(d.y1); }) .attr("height", function (d) { return y(d.y0) - y(d.y1); }) .style("fill", function (d) { return color(d.name); }); </script> </body> </html>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 更改鼠标悬停事件D3 JS上的条尺寸 如何在D3中将鼠标悬停在更大的位置？ D3工具提示或条形图上的鼠标悬停 D3 JS工具提示触发鼠标悬停事件 鼠标悬停在d3上的工具提示 .on（&#39;mouseover&#39;）on d3 D3鼠标悬停不触发 D3 工具提示 + 鼠标悬停 将鼠标悬停在线上不会在d3 js中产生圆圈 在饼图中使用mouseover并在d3 js中显示标签
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM