堆栈内存溢出
  简体   繁体   English

将条形图数据链接到d3工具提示

[英]Linking bar graph data to d3 tooltip

 原文  2015-04-30 10:44:52  3   1    javascript/ css/ svg/ d3.js

问题描述

I am trying to link my tooltip in d3.js to my bar graph data, however I cannot seem to find an appropriate method for this. 我正在尝试将d3.js中的工具提示链接到我的条形图数据，但是我似乎找不到适合的方法。 Could anyone help me out? 有人可以帮我吗？ I have seen methods using tipsy, but I don't know the relative benefits of this. 我已经看到了使用小技巧的方法，但是我不知道这样做的相对好处。 I am just trying to link the data to the tooltip to start. 我只是想将数据链接到工具提示以开始。 Then I will try to build a smaller graph into the tooltip, but that is very much the end goal! 然后，我将尝试在工具提示中构建一个较小的图形，但这几乎是最终目标！

Any help would be much appreciated! 任何帮助将非常感激！

Here is my code so far: 到目前为止，这是我的代码： 

  <!DOCTYPE html>
<meta charset="utf-8">
<head>
<style>
.bar2 {
    fill: #00AF9D; 
}

.bar{
    fill: #FF5A00;
}


.axis text {
 font-family: 'Open Sans', sans-serif;
            font-size: 2vw;
            color:grey;

}

.axis path, .axis line {

    fill: none;

    stroke: #000;

    shape-rendering: crispEdges;

}

.svg{ position: absolute;
            top: 5vh;
            left: 5vw;
            border: 1px solid #A0A0A0 ;
            height: 90vh;
            width: 90vw;
            border-radius: 25px;
            box-shadow: 3vh 3vh 3vh #D8D8D8 ;
            background-color:#FFFFFF;}

.lab{  font-family: 'Open Sans', sans-serif;
            font-size: 1vw;
            color:grey;
           }
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>




<script>

var w = window.innerWidth;
        var h = window.innerHeight;


data = [{
    name: "A",
    value: 1,
    value2: 1
}, {
    name: "B",
    value: 4,
    value2: 5
}, {
    name: "C",
    value: 17,
    value2:18
}, {
    name: "D",
    value: 30,
    value2: 30
}, {
    name: "E",
    value: 60,
    value2: 60
}, {
    name: "F",
    value: 100,
    value2: 100
}]

var margin = {
    top: 0.01*h,
    right: 0.05*w,
    bottom:0.02*h,
    left: 0.05*w
},
width = 0.9*w - margin.left - margin.right,
    height =0.9*h - margin.top - margin.bottom;

var x = d3.scale.linear()
    .range([0, width])

var y = d3.scale.ordinal()
    .rangeRoundBands([0, height], .2);

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

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

x.domain([-100,100])
y.domain(data.map(function (d) {
    return d.name;
}));

svg.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar")
    .attr("x", function (d) {return x(Math.min(0, d.value));})
    .attr("y", function (d) {return y(d.name);})
    .attr("width", function (d) {return Math.abs(x(d.value) - x(0));})
    .attr("height", y.rangeBand())
    .on("mouseover", function(){return tooltip.style("visibility", "visible");})
    .on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style(       "left",(event.pageX+10)+"px");})
    .on("mouseout", function(){return tooltip.style("visibility", "hidden");});

    svg.selectAll("text")
   .data(data)
   .enter()
   .append("text")
   .attr("class", "lab")
   .text(function (d){return d.value+"%";})
   .attr("text-anchor", "middle")
                .attr("font-family", "sans-serif")
                .attr("font-size", "10px")
                .attr("fill", "black")
    .attr("x", function (d) {return x(Math.min(0, d.value))+(Math.abs(x(d.value) - x(0))/2);})
    .attr("y", function (d) {return y(d.name) + (y.rangeBand())/2 ;})




svg.selectAll(".bar2")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar2")
    .attr("x", function (d) {return x(Math.min(0, -d.value2));})
    .attr("y", function (d) {return y(d.name);})
    .attr("width", function (d) {return Math.abs(x(-d.value2) - x(0));})
    .attr("height", y.rangeBand())
    .on("mouseover", function(){return tooltip.style("visibility", "visible");})
    .on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style(       "left",(event.pageX+10)+"px");})
    .on("mouseout", function(){return tooltip.style("visibility", "hidden");});

svg.selectAll("text1")
   .data(data)
   .enter()
   .append("text")
   .attr("class", "lab")
   .text(function (d){return d.value2+"%";})
   .attr("text-anchor", "middle")
                .attr("font-family", "sans-serif")
                .attr("font-size", "10px")
                .attr("fill", "black")
    .attr("x",  function (d) {return x(Math.min(0, -d.value2))+(Math.abs(x(-d.value2) - x(0))/2);})
    .attr("y", function (d) {return y(d.name)+(y.rangeBand())/2;});


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


svg.append("g")
    .attr("class", "y axis")
    .append("line")
    .attr("x1", x(0))
    .attr("x2", x(0))
    .attr("y2", height -margin.bottom);



svg.append("g")
    .attr("class", "y axis")
    .append("line")
    .attr("x1", x(0))
    .attr("x2", x(0))
    .attr("y2", height -margin.bottom);




function type(d) {
    d.value = +d.value;
    return d;
};

//////////////////////////Tool Tip///////////////////////////////////




var tooltip = d3.select("body")
    .append("div")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden")
    //.text(function (d){return d.value2+"%";})
    .text("tooltip")










</script>
</body>
</html>

1 个解决方案

解决方案1
 0 已采纳  2015-04-30 10:54:33

How about this: a bit more code in your bar mouseover and mouseout listeners. 怎么样了：bar 鼠标悬停和mouseout侦听器中还有更多代码。 

svg.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar")
    .attr("x", function (d) {return x(Math.min(0, d.value));})
    .attr("y", function (d) {return y(d.name);})
    .attr("width", function (d) {return Math.abs(x(d.value) - x(0));})
    .attr("height", y.rangeBand())
    .on("mouseover", function(d){
        tooltip
            .style("visibility", "visible")
            .text(d.value2+"%"); // Add text to tooltip
    })
    .on("mousemove", function(){
        tooltip
            .style("top", (event.pageY-10)+"px")
            .style("left",(event.pageX+10)+"px");
    })
    .on("mouseout", function(d){
        tooltip
            .style("visibility", "hidden")
            .text(''); // Remove text from tooltip
    });

暂无
暂无

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

相关问题 d3 v4获取条形图工具提示的数据 - d3 v4 getting data for bar graph tooltip 条形图中的d3动态数据 - d3 dynamic data in bar graph 更新D3堆叠条形图中的数据 - Updating data in D3 stacked bar graph 如何获取d3配对条形图上条形的x位置以更新工具提示 - How to get the x position of a bar on d3 paired bar graph for tooltip update 如何在d3图形中将大小显示为工具提示？ - How to display the size as tooltip in a d3 graph? D3工具提示或条形图上的鼠标悬停 - D3 tooltip or mouseover on bar chart 在堆叠的条形图D3中添加工具提示 - add tooltip in stacked bar chart D3 D3为CSS颜色，用于堆叠条形图 - D3 to CSS color for stacked bar graph d3条形图的转换被反转 - d3 Transition for Bar Graph is Reversed D3比例图作为新条添加 - D3 Scale graph as a new bar is added
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM