Javascript 单击条形图矩形后，更新其他条形图失败
我正在尝试使用D3创建一个仪表板。我的要求是，点击一个条形图矩形，其他两个条形图应该相应地更新。这是我目前掌握的代码 到目前为止，这是我得到的。点击主题分布下的任何矩形，对应于度中心和贴近度中心的图形都应该更新。到目前为止，我只更新了学位中心 若调用与贴近度中心相关的更新函数，则不会发生度中心更新 谁能告诉我是什么问题吗。函数调用哪里出了问题 我想更新最新的发现。虽然我无法解决这个问题，但我想知道为什么控件没有返回到我进行函数调用的位置。 如果JSFIDLE不起作用，请复制粘贴代码并运行它Javascript 单击条形图矩形后，更新其他条形图失败,javascript,html,d3.js,dom-events,Javascript,Html,D3.js,Dom Events,我正在尝试使用D3创建一个仪表板。我的要求是，点击一个条形图矩形，其他两个条形图应该相应地更新。这是我目前掌握的代码 到目前为止，这是我得到的。点击主题分布下的任何矩形，对应于度中心和贴近度中心的图形都应该更新。到目前为止，我只更新了学位中心 若调用与贴近度中心相关的更新函数，则不会发生度中心更新 谁能告诉我是什么问题吗。函数调用哪里出了问题 我想更新最新的发现。虽然我无法解决这个问题，但我想知道为什么控件没有返回到我进行函数调用的位置。 如果JSFIDLE不起作用，请复制粘贴代码并运行它 &
<!DOCTYPE html>
<meta charset="utf-8">
<script>
var toggle = 0;
var topic = "";
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar {
fill: orange;
}
.bar1 {
fill: red;
}
.bar2 {
fill: brown;
}
.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;
}
</style>
<body>
<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>
<table border = 1>
<tr>
<td align = "left">
<div>
<h3 align = "center">Topic Distribution</h3>
</div>
<div id = "Bar" width=460>
<script>
var tsv = "letter frequency\n" +
"django .08167\n" +
"dictionary .01492\n" +
"C .02782\n" +
"D .04253\n" +
"E .12702\n" +
"F .02288\n" +
"G .02015\n" +
"H .06094\n" +
"I .06966\n" +
"J .00153";
var margin = {top: 40, right: 20, bottom: 30, left: 40},
width = 460 //- margin.left - margin.right,
height = 200 //- margin.top - margin.bottom;
var formatPercent = d3.format(".0%");
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(formatPercent);
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return "<strong>Frequency:</strong> <span style='color:red'>" + d.frequency + "</span>";
})
var svg = d3.select("#Bar").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);
//d3.tsv("data.tsv", type, function(error, data) {
var data = d3.tsv.parse(tsv, type)
x.domain(data.map(function(d) { return d.letter; }));
y.domain([0, d3.max(data, function(d) { return d.frequency; })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Frequency");
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.letter); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.frequency); })
.attr("height", function(d) { return height - y(d.frequency); })
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
.on("click", function(d){
**topic = d.letter;changeData(d.letter);**
})
//});
function type(d) {
d.frequency = +d.frequency;
return d;
}
//FUNCTION TO CALL TOPIC RESPECTIVE NETWORK GRAPHS
function callNetwork(){
alert(topic)//Gives the TOPIC CHOSEN.. use this to change the HTML FILES
window.open("http://localhost:7777/FORCE/force.html", "_blank", "toolbar=yes, scrollbars=yes, resizable=yes, top=500, left=500, width=900, height=900");
}
</script>
</div>
<br>
<div align = "top">
<table align = "center" border=1>
<tr>
<td align = "center">
<button type="button" class="btn btn-default btn-sm" onclick="callNetwork();">
<span class="glyphicon glyphicon-info-sign"></span> Click to View Network Graph
</button>
</td>
</tr>
</table>
</div>
</td>
<td id = "closeness" align="center" width=460>
<div>
<h3 align = "center">Degree Centrality</h3>
</div>
<div id = "Bar1">
<script>
**function changeData(Topic){**
if(toggle == 1)
{
document.getElementById("Bar1").innerHTML = "";
}
**changeCentralData(Topic)**
toggle = 1;
if (Topic == "dictionary")
{
var tsv = "letter frequency\n" +
"django 12\n" +
"dictionary 12\n" +
"C 55\n" +
"D 10\n" +
"E 90\n" +
"F 30\n" +
"G 80\n" +
"H 10\n" +
"I 0\n" +
"J 0";
}
if(Topic == "django")
{
var tsv = "letter frequency\n" +
"django 12\n" +
"dictionary 33\n" +
"C 55\n" +
"D 100\n" +
"E 90\n" +
"F 300\n" +
"G 80\n" +
"H 10\n" +
"I 0\n" +
"J 0";
}
var margin1 = {top: 40, right: 20, bottom: 30, left: 40},
width1 = 460 //- margin.left - margin.right,
height1 = 200 //- margin.top - margin.bottom;
var formatPercent1 = d3.format("");
var x1 = d3.scale.ordinal()
.rangeRoundBands([0, width1], 0);
//.rangeRoundBands([width1, 0);
var y1 = d3.scale.linear()
.range([height1, 0]);
var xAxis1 = d3.svg.axis()
.scale(x1)
.orient("bottom");
var yAxis1 = d3.svg.axis()
.scale(y1)
.orient("left")
.tickFormat(formatPercent1);
var svg1 = d3.select("#Bar1").append("svg")
.attr("width", width1 + margin1.left + margin1.right)
.attr("height", height1 + margin1.top + margin1.bottom)
.append("g")
.attr("transform", "translate(" + margin1.left + "," + margin1.top + ")");
var data1 = d3.tsv.parse(tsv, type)
x1.domain(data1.map(function(d) { return d.letter; }));
y1.domain([0, d3.max(data1, function(d) { return d.frequency; })]);
svg1.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height1 + ")")
.call(xAxis1);
svg1.append("g")
.attr("class", "y axis")
.call(yAxis1)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Frequency");
svg1.selectAll(".bar")
.data(data1)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x1(d.letter); })
.attr("width", x1.rangeBand()-2)
.attr("y", function(d) { return y1(d.frequency); })
.attr("height", function(d) { return height1 - y1(d.frequency); })
.on('mouseover', tip1.show)
.on('mouseout', tip1.hide)
function type(d) {
d.frequency = +d.frequency;
return d;
}
}
</script>
</div>
</td>
<td align = "right" width=460>
<div>
<h3 align = "center">Closeness Centrality</h3>
</div>
<div id = "Bar2">
<script>
**function changeCentralData(Topic){**
if(toggle == 1)
{
document.getElementById("Bar2").innerHTML = "";
}
toggle = 1;
if (Topic == "dictionary")
{
var tsv = "letter frequency\n" +
"django 12\n" +
"some 12\n" +
"C 55\n" +
"D 10\n" +
"E 90\n" +
"F 30\n" +
"G 80\n" +
"H 10\n" +
"I 0\n" +
"J 0";
}
if(Topic == "django")
{
var tsv = "letter frequency\n" +
"django 12\n" +
"some 33\n" +
"C 55\n" +
"D 100\n" +
"E 90\n" +
"F 300\n" +
"G 80\n" +
"H 10\n" +
"I 0\n" +
"J 0";
}
var margin2 = {top: 40, right: 20, bottom: 30, left: 40},
width2 = 460 //- margin.left - margin.right,
height2 = 200 //- margin.top - margin.bottom;
var formatPercent2 = d3.format("");
var x2 = d3.scale.ordinal()
.rangeRoundBands([0, width2], 0);
//.rangeRoundBands([width2, 0);
var y2 = d3.scale.linear()
.range([height2, 0]);
var xAxis2 = d3.svg.axis()
.scale(x2)
.orient("bottom");
var yAxis2 = d3.svg.axis()
.scale(y2)
.orient("left")
.tickFormat(formatPercent2);
var svg2 = d3.select("#Bar2").append("svg")
.attr("width", width2 + margin2.left + margin2.right)
.attr("height", height2 + margin2.top + margin2.bottom)
.append("g")
.attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");
var data2 = d3.tsv.parse(tsv, type)
x2.domain(data2.map(function(d) { return d.letter; }));
y2.domain([0, d3.max(data2, function(d) { return d.frequency; })]);
changeDegreeData(Topic)
svg2.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height2 + ")")
.call(xAxis2);
svg2.append("g")
.attr("class", "y axis")
.call(yAxis2)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Frequency");
svg2.selectAll(".bar")
.data(data2)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x2(d.letter); })
.attr("width", x2.rangeBand()-2)
.attr("y", function(d) { return y2(d.frequency); })
.attr("height", function(d) { return height2 - y2(d.frequency); })
.on('mouseover', tip1.show)
.on('mouseout', tip1.hide)
function type(d) {
d.frequency = +d.frequency;
return d;
}
}
</script>
</div>
</td>
</tr>
</table>
var type = function type(d) {
d.frequency = +d.frequency;
return d;
}
嗨，米切莱克，谢谢你的回复。这里的问题是，对changeCentralData的调用根本没有发生。我在函数的开头放了一个alert语句，但我没有看到调用发生。切换我也注释掉了，但我没有看到函数发生调用