Question

我正在尝试使用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>

在“”“下标记的那些是给我问题的代码。我不确定为什么通话结束后的控制没有回来。请帮助我。

此致斯利拉姆

Answer 1

var toggle和Bar1

Bar2

此外，我无法理解类型（d）功能的含义 - 这是做什么的：

d.frequency = +d.frequency;
您确定，type()已经在您致电时定义了吗？我会做的
```
      var type = function type(d) {
        d.frequency = +d.frequency;
        return d;
      }
```
而是将其放在代码中稍高一些。

单击条形图矩形时，其他条形图的更新将失败

1 个答案: