javascript - 单击条形图矩形时，其他条形图更新失败

我正在尝试使用 D3 创建仪表板。我的要求是，单击条形图矩形后，其他 2 个条形图应相应更新。这是我到目前为止的代码。

enter image description here 到目前为止，这就是我得到的。单击“主题分布”下的任何矩形时，应更新与“度中心性”和“紧密度中心性”相对应的图表。截至目前，对我来说，仅更新了程度中心性。

如果我调用与接近中心性相关的更新函数，则不会发生度中心性更新

有人可以告诉我问题是什么吗？函数调用哪里出了问题？

我想更新最新的发现。虽然我无法解决这个问题，但我想知道为什么控件没有返回到我进行函数调用的位置。如果 Jsfiddle 不起作用，请复制粘贴代码并运行它。

<!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>

标记为“”“”的代码是给我带来问题的代码。我不确定为什么通话结束后控件没有返回。请帮我解决这个问题。

最佳答案

Bar1 和 Bar2 具有相同的 var 切换
我也无法理解 type(d) 函数的含义 - 这是做什么的:

d.频率 = +d.频率;
您确定 type() 在您调用时已经定义了吗？我会这样做
```
      var type = function type(d) {
        d.frequency = +d.frequency;
        return d;
      }
```
而是将其放在代码中稍高的位置。

关于javascript - 单击条形图矩形时，其他条形图更新失败，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29727668/

javascript - 单击条形图矩形时，其他条形图更新失败

上一篇：javascript - SVG 样条线(带有贝塞尔曲线)到 Three.js 车床对象

下一篇：javascript - 如何在钛(IOS)中定义窗口的模糊事件监听器？