0
Я пытаюсь создать всплывающие подсказки, основанные на этом уроке http://chimera.labs.oreilly.com/books/1230000000345/ch10.html#_svg_element_tooltips Перейти к: HTML Div ПодсказкиD3: не может получить доступ к данным в анонимной функции
У меня есть вопрос, хотя. Я не могу передать данные анонимной функции. Обратитесь к ВЫДАДИМ комментарий в коде
<html>
<head>
<title>Testing warehouse</title>
<style>
#tooltip {
position: absolute;
width: 200px;
height: auto;
padding: 10px;
background-color: white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
pointer-events: none;
}
#tooltip.hidden {
display: none;
}
#tooltip p {
margin: 0;
font-family: sans-serif;
font-size: 16px;
line-height: 20px;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
//NOTE:: x and y co-ordinates needs to be set on excel file.
// width and height of rect needs to be set within functions returnheight and returnwidth
var width = 1500,
height = 1500;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var data
d3.csv("AisleA.csv", function(d) {
data = d;
function returnwidth(bay)
{
//if odd bay then LS else Carton Flow.
//This fucntion keeps getting updated as we include other aisles and bays
if(Number(bay) & 1)
{
// ODD
return 40
}
else
{
// EVEN
return 60
}
}
function returnheight(bay)
{
if(Number(bay) & 1)
{
// ODD
return 40
}
else
{
// EVEN
return 60
}
}
for(i = 0; i < data.length; i++)
{
svg.append("rect")
.attr("x", data[i].x)
.attr("y", data[i].y)
.attr("width", returnwidth(data[i].Bay))
.attr("height", returnheight(data[i].Bay))
.style("fill","green")
.style("stroke","black")
.on("mouseover", function(d) {
//Get this bar's x/y values, then augment for the tooltip
var xPosition = parseFloat(d3.select(this).attr("x"))/2 //+ xScale.rangeBand()/2;
var yPosition = parseFloat(d3.select(this).attr("y"))/2 //+ h/2;
console.log(data[i]) // ISSUE HERE. VALUE SHOWN AS UNDEFINED
//Update the tooltip position and value
d3.select("#tooltip")
.style("left", xPosition + "px")
.style("top", yPosition + "px")
.select("#value")
.text(data[i].PickRate); //ISSUE HERE
//Show the tooltip
d3.select("#tooltip").classed("hidden", false);
})
.on("mouseout", function() {
//Hide the tooltip
d3.select("#tooltip").classed("hidden", true);
});
}
});
</script>
<div id="tooltip" class="hidden">
<p><strong>Important Label Heading</strong></p>
<p><span id="value">100</span>%</p>
</div>
</body>
</html>
Данные, которые мне нужно отобразить в пределах наконечника инструмента в данных [I]. Может кто-нибудь пожалуйста, предложить мне, как я могу получить доступ к этой информации и отображения
CSV:
Aisle,Bay,PickRate,ReplenRate,x,y
A,1,medium,low,20,60
A,2,medium,high,20,120
A,3,low,low,80,60
A,4,high,low,100,120
A,5,medium,danger,140,60
A,6,danger,low,180,120
Рабочий код - регулировка кончик инструмента
<html>
<head>
<title>Testing warehouse</title>
<style>
#tooltip {
position: absolute;
width: 200px;
height: auto;
padding: 10px;
background-color: white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
pointer-events: none;
}
#tooltip.hidden {
display: none;
}
#tooltip p {
margin: 0;
font-family: sans-serif;
font-size: 16px;
line-height: 20px;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
//NOTE:: x and y co-ordinates needs to be set on excel file.
// width and height of rect needs to be set within functions returnheight and returnwidth
var width = 1500,
height = 1500;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var data
d3.csv("AisleA.csv", function(d) {
data = d;
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", function(d){return d.x})
.attr("y", function(d){return d.y})
//IF ODD BAY THEN LS ELSE CARTON FLOW.
//THIS BELOW FUCNTION KEEPS GETTING UPDATED AS WE INCLUDE OTHER AISLES AND BAYS
.attr("width", function(d){
if(Number(d.Bay) & 1)
{
// ODD
return 40
}
else
{
// EVEN
return 60
}
})
.attr("height", function(d){
if(Number(d.Bay) & 1)
{
// ODD
return 40
}
else
{
// EVEN
return 60
}
})
.style("fill","green") //SHOULD CHANGE BASED ON THE PICK RATE VALUE
.style("stroke","black")
.on("mouseover", function(data) {
//Get this bar's x/y values, then augment for the tooltip
var xPosition = parseFloat(d3.select(this).attr("x"))/2 //+ xScale.rangeBand()/2;
var yPosition = parseFloat(d3.select(this).attr("y"))/2 //+ h/2;
//UPDATE THE TOOLTIP POSITION AND VALUE
d3.select("#tooltip")
.style("left", xPosition + "px")
.style("top", yPosition + "px")
.select("#value")
.text(data.PickRate);
//Show the tooltip
d3.select("#tooltip").classed("hidden", false);
})
.on("mouseout", function() {
//Hide the tooltip
d3.select("#tooltip").classed("hidden", true);
});
});
</script>
<div id="tooltip" class="hidden">
<p><strong>Important Label Heading</strong></p>
<p><span id="value">100</span></p>
</div>
</body>
</html>
Вы также можете оставить сообщение AisleA.csv – Cyril
Sure .. опубликовать вместе с кодом – maverick
Это не так, как работает d3. Вместо этого при переходе через массив данных вы должны «присоединить» данные к прямоугольнику с помощью функции «.data». Я предлагаю вам попробовать этот учебник: http://bost.ocks.org/mike/bar/ –