Question

我是d3.js和Javascript的新手，目前正在尝试使用d3构建图表。我的数据当前放在dataArray var中，但我想将其外部化。每次我尝试使用其他文件或不同的数据格式时，它都不起作用。这是我的代码：

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta>
  <meta http-equiv="refresh" content="">
  <meta name="description" content="Drawing Shapes w/ D3 - " />
  <meta charset="utf-8">
  <title>Resources per Project</title>
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

  <style type="text/css">
    h1 {
      font-size: 35px;
      color: darkgrey;
      font-family: Helvetica;
      border-bottom-width: 3px;
      border-bottom-style: dashed;
      border-bottom-color: black;
    }
    h2 {
      font-size: 20px;
      color: black;
      font-family: Helvetica;
      text-decoration: underline;
      margin-left: 290px;
      margin-top: 0px;
    }
  </style>
</head>

<body>
  <h1>Resources used per Project</h1>
  <script type="text/javascript">
    var width = 600
    var height = 500
    var emptyVar = 0
    var dataArray = [0.35, 1.66, 3.04, 1.54, 3.45, 2.56, 2.29, 1.37];
    var emptyData = [];
    var widthScale = d3.scale.linear()
      .domain([0, 5])
      .range([0, width]);

    var color = d3.scale.linear()
      .domain([0, 5])
      .range(["#000066", "#22abff"])

    var axis = d3.svg.axis()
      .ticks("10")
      .scale(widthScale);

    var canvas = d3.select("body")
      .append("svg")
      .attr("width", width)
      .attr("height", height)
      .append("g")
      .attr("transform", "translate(30, 0)");

    var bars = canvas.selectAll("rect")
      .data(dataArray)
      .enter()
      .append("rect")
      .attr("width", emptyVar)
      .attr("height", 50)
      .attr("fill", function(d) {
        return color(d)
      })
      .attr("y", function(d, i) {
        return i * 55
      })

     canvas.append("g")
      .attr("transform", "translate(0, 430)")
      .attr("font-family", "Helvetica")
      .attr("font-size", "15px")
      .call(axis);

    bars.transition()
      .duration(1500)
      .delay(200)
      .attr("width", function(d) {
        return widthScale(d);
      })
  </script>
  <h2>Resources</h2>
</body>

</html>

＆＃13;

附加了2个文件（一个JSON和一个CSV），其中包含我尝试使用的数据。资源＆＃34;资源＆＃34;是dataArray中的当前数据。如何将这些数据外部化？

Answer 1

如果要将外部数据加载到D3中。你有两个选择：

选项A ：一个文件（JSON或CSV或TSV）

d3.json("your.json", function (data) {
   // stuff here
})

或

d3.csv("your.csv", function (data) {
   // stuff here
})

或

d3.tsv("your.tvs", function (data) {
   // stuff here
})

选项B ：多个文件（JSON，CSV和TSV）

queue()
    .defer(d3.json, 'json_data.json')
    .defer(d3.csv, 'csv_data.csv')
    .defer(d3.tsv, 'tsv_data.tsv')
    .await(makeGraph);

function makeGraph (json_data, csv_data, tsv_data, error) {
    //your stuff here
}

要使用queue，您必须将脚本包含在标题中：

<script src="http://d3js.org/queue.v1.min.js"></script>

队列等待所有数据到达，然后执行该功能。

JSON：JavaScript Object Notation
CSV：逗号分隔值
TSV：制表符分隔值

然后你的代码：

var width = 600
var height = 500
var emptyVar = 0
var dataArray = [0.35, 1.66, 3.04, 1.54, 3.45, 2.56, 2.29, 1.37];
var emptyData = [];
var widthScale = d3.scale.linear()
  .domain([0, 5])
  .range([0, width]);

var color = d3.scale.linear()
  .domain([0, 5])
  .range(["#000066", "#22abff"])

var axis = d3.svg.axis()
  .ticks("10")
  .scale(widthScale);

var canvas = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(30, 0)");

queue()
    .defer(d3.json, 'json_data.json')
    .defer(d3.csv, 'csv_data.csv')
    .await(makeGraph);

function makeGraph(json_data, csv_data, error) {
    if (error) {
       alert ("something went wrong!!");
    }
    var bars = canvas.selectAll("rect")
      .data(your_data_from_json_or_csv)
      .enter()
      .append("rect")
      .attr("width", emptyVar)
      .attr("height", 50)
      .attr("fill", function(d) {
        return color(d)
      })
      .attr("y", function(d, i) {
        return i * 55
      })

     canvas.append("g")
      .attr("transform", "translate(0, 430)")
      .attr("font-family", "Helvetica")
      .attr("font-size", "15px")
      .call(axis);

    bars.transition()
      .duration(1500)
      .delay(200)
      .attr("width", function(d) {
        return widthScale(d);
      })
}

如何外部化我的数据

1 个答案: