Javascript 在不同选项卡中组合D3和Jquery_Javascript_Jquery_D3.js

Javascript 在不同选项卡中组合D3和Jquery

javascript jquery d3.js

Javascript 在不同选项卡中组合D3和Jquery,javascript,jquery,d3.js,Javascript,Jquery,D3.js,我一直在尝试将jQuery和D3.js结合起来，在不同的选项卡中显示不同的chrt。我有两个标签，第一个我想展示一个购物车，第二个我想展示一个简单的（稍后我会展示一个图表）最后的结果是我得到了标签，chrt如下所示。我想知道在这种情况下是否需要使用AJAX 这是我的密码： jQuery测试函数图（数据）{ “严格使用”； d3.选择（“主体”） .附加（“div”） .attr（“类别”、“图表”） .selectAll（“div.line”） .数据（数据.现金） .输入（） .附加（

我一直在尝试将jQuery和D3.js结合起来，在不同的选项卡中显示不同的chrt。我有两个标签，第一个我想展示一个购物车，第二个我想展示一个简单的（稍后我会展示一个图表）

最后的结果是我得到了标签，chrt如下所示。我想知道在这种情况下是否需要使用AJAX

这是我的密码：


jQuery测试
函数图（数据）{
“严格使用”；
d3.选择（“主体”）
.附加（“div”）
.attr（“类别”、“图表”）
.selectAll（“div.line”）
.数据（数据.现金）
.输入（）
.附加（“div”）
.attr（“类”、“行”）；
d3.选择全部（“分割线”）
.附加（“div”）
.attr（“类别”、“标签”）
.text（函数（d）{返回d.name}）；
d3.选择全部（“分割线”）
.附加（“div”）
.attr（“类”、“条”）
.style（“宽度”，函数（d）{返回d.count/100+“px”}）
.text（函数（d）{return Math.round（d.count）}）；
}
$（函数（）{
$（“#制表符”）.tabs（）；
});




三十一
d3.json（“data/plaza_traffic.json”，draw）；
zz

任何帮助都将不胜感激！

Andi

当我运行此文件时，我不明白您的问题到底是什么，那么我要显示的图形没有出现在“tabs-1”中。首先出现菜单，并在图形下方显示。但是我想让图表显示在tabs-1的菜单中。你的数据是什么样的？发布一个

plaza_traffic.json的示例，这里是我的数据摘录：{“cash”：[{“count”：26774.09756097561，“id”：1，“name”：“Robert F.Kennedy Bridge Bronx plaza”}，{“count”：18612.77618364419，“id”：2，“name”：“罗伯特·F·肯尼迪桥曼哈顿广场”}]}


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery test</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <link rel="stylesheet" href="generic.css">

  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

  <script>

  function draw(data){
    "use strict";       
    d3.select("body")
        .append("div")
            .attr("class", "chart")
        .selectAll("div.line")
        .data(data.cash)
        .enter()
        .append("div")
            .attr("class", "line");

    d3.selectAll("div.line")
        .append("div")
            .attr("class","label")
            .text(function(d){return d.name});

    d3.selectAll("div.line")
        .append("div")
            .attr("class", "bar")
            .style("width", function (d) {return d.count/100 + "px"})                   
            .text(function (d){return Math.round(d.count)});            
  }

   $(function() {
      $( "#tabs" ).tabs();
  });
</script>
</head>
<body>

     <div id="tabs">
   <ul>
         <li><a href="#tabs-1">Data</a></li>
         <li><a href="#tabs-2">Text</a></li>    
       </ul>

     <div id="tabs-1">
        xx1
        <script>
           d3.json("data/plaza_traffic.json", draw);    
    </script>             
    </div>
    <div id="tabs-2">
       zz
     </div>  
   </div>

</body>
</html>