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

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

转载作者：行者123 更新时间：2023-11-28 07:25:24

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

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

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

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

http://jsfiddle.net/j6LyrLxr/

我想更新最新的发现。虽然我无法解决这个问题，但我想知道为什么控件没有返回到我进行函数调用的位置。如果 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/

文章推荐： c++ - 实现打印机后台处理程序

文章推荐： css - IE 上的 Bootstrap justified-nav 行为

文章推荐： C++ 命名空间 FW ；矩阵乘法

文章推荐： javascript - 表格 td 标签中弹出框工具提示的问题

Android - 条形图、条形图
我想在我的 android 应用程序中实现一个反馈/评级图表。(就像当你打开 google play 并检查应用程序的反馈时，有一个来自投票它的用户的彩色图表)任何人都可以帮助我如何开始那个？感谢您提
LaTeX 条形图
我正在尝试使用 LaTeX 制作条形图。到目前为止我一直不成功，所以任何人都可以帮助我，也许是最近项目的副本？如何使用 pstricks 制作条形图？我会很感激最简单的解决方案，因为我最近才开始使用
r - 将时间线上的时间跨度可视化为水平直方图/条形图
我有一个包含 6 个事件及其发生时间跨度的 csv 表。我的变量是开始日期、结束日期和事件 ID。我打算创建一个水平直方图/条形图可视化来显示时间范围，即某些类型的事件持续了多长时间。 X 轴应该有多
r - float 条形图
我想制作可以指定条形最小值的条形图(很像盒须图中的盒子)。条形图可以做到吗？我怀疑答案在 ggplot 中，但我找不到示例。这是一些数据: X Jan F
r - 条形图 - 两个相邻的条形图和单独窗口中的条形图
我想使用以下数据来创建可视化: > dput(data) structure(c(1264L, 2190L, 2601L, 1441L, 1129L, 2552L, 1820L, 306L,
python - 条形图，带有单独的正值和负值条形图
我有一个包含正值和负值的数据框。我想显示一个显示两个条形的条形图，一个条形显示正值的百分比，另一个条形图显示负值的百分比。 dummy = pd.DataFrame({'A' : [-4, -3, -
javascript - 如何在条形图中添加自定义文本以及如何减小图表js中y轴的步长(条形图)
我正在尝试在栏中插入自定义文本，我搜索了很多线程，但仍然没有得到任何解决方案。然后我想减小 y 轴的步长。我已附上我的代码。 jQuery( document ).ready(function() {
使用子图的 Pandas 条形图
我正在使用 pandas 来创建条形图。这是一个例子: df=pd.DataFrame(np.random.rand(10, 4), columns=['a', 'b', 'c', 'd']) df.
表示范围的 Python 条形图
我想在python中制作一个分类图来表示几个变量的范围。我想也许我会使用条形图并为条形设置范围。这是我的条形图 import matplotlib.pyplot as plt import numpy
javascript - 条形图 - 条形填充和对齐
我有一个显示 3 个条形的堆叠百分比条形图。 JSFiddle:https://jsfiddle.net/Lr0bszj6/ 由于某种原因，条形之间有很多空间并且没有与标签对齐(只有中间一个)。设置
Android aChartEngine 条形图
我正在尝试使用 aChartEngine 将 GPS 数据(正在查看或正在使用的卫星)显示为条形图，但我没有在此 View 中显示任何数据。这是我的代码，所以你能告诉我我犯了什么错误吗？ public
javascript - 条形图将数据堆叠在彼此之上
我正在使用 this chart implementation . 但是，它分散了我的数据，而不是相互堆叠。我想在 1970 年堆叠我的第一个数组，在 1975 年堆叠第二个数组。换句话说，我希望有
Matlab 条形图 - 根据符号和大小填充不同颜色的条形图
我正在尝试用不同颜色为条形图中的各个条形着色，比如蓝色表示正，红色表示负。我在互联网上找不到任何有用的东西。我在下面的代码中发现每个条形图都根据第一个条形图的值着色，而不是为每个条形图单独设置颜色:
python - Pandas 条形图
我刚刚转移到 pandas 0.20/matplotlib 2.0 python 3.6。 (共构成以下版本)。我用 pandas 来绘制条形图，因为 matplotlib 的级别总是太低。着色列的行
python - float 条形图
我正在尝试制作一个图，其中 x 轴是时间，y 轴是一个条形图，其中的条形图覆盖特定时间段，如下所示: ______________
CSS 条形图 - 非常简单
我有一些非常基本的代码，它可以正常工作，除了所有内容都与顶部对齐...理想情况下，条形图应与底部对齐。我想我可以使用固定定位，因为尺寸是 50px x 50px 的平方，但我更喜欢“固定”少一点的东西
VBA 在图表(条形图)上写入值
这是我用来 Dim ejex As String, ejey As String Dim graficos As String Worksheets("Sheet1").Activate ejex =
来自数据文件的 Gnuplot 3D 条形图
我有一个生成如下条形图的 gnuplot 脚本: 输入数据位于具有多列的文件中，每一列最终都构成图表中的一个集群(示例中显示了 2 个集群)。每个文件都构成图表中的一个条形(示例中有 9 个)。每个文
r - 如何使用一个变量连续填充 ggplot2 条形图
我正在为我的数据 movies 使用库 ggplot2movies 请记住，我指的是 mpaa 评级和用户评级，这是两个不同的事物。如果您不想加载 ggplot2movies 库，这里是相关数据的示例
matplotlib - Pandas 条形图-按列指定条形颜色
有没有一种简单的方法可以使用Pandas DataFrame.plot(kind='bar')方法按列名指定条形颜色？我有一个脚本，可以从目录中的几个不同数据文件生成多个DataFrame。例如，它

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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