javascript - 如何外部化我的数据-6ren

javascript - 如何外部化我的数据

转载作者：行者123 更新时间：2023-11-27 22:51:12

25

4

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

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

附件是 2 个文件(一个 JSON 和一个 CSV )，其中包含我尝试使用的数据。 “resources”下的数据是dataArray中的当前数据。如何外部化这些数据？

最佳答案

如果要将外部数据加载到D3中。您有 2 个选择:

选项 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，您必须在 header 中包含脚本:

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

排队等待所有数据到达，然后执行该函数。

JSON:JavaScript 对象表示法
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);
      })
}

关于javascript - 如何外部化我的数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38044248/

25

4

0

文章推荐： html - 在 Bootstrap 网格中对齐大小不等的图像

文章推荐： c++ - 为什么这些模板化函数不能不带参数？

文章推荐： javascript - 传单 - 我似乎无法让基本示例发挥作用

Python word_tokenize 化
我是 python 的新手。我试图找到我的文本的频率分布。这是代码， import nltk nltk.download() import os os.getcwd() text_file=open(
安卓 fragment 化
我对安卓 fragment 感到困惑。我知道内存 fragment 但无法理解什么是 android fragment 问题。虽然我发现很多定义，比如 Android fragmentation re
wordpress - Docker 化 WordPress
尝试对 WordPress 进行 dockerise 我发现了这个场景: 2个数据卷容器，一个用于数据库(bbdd)，另一个用于wordpress文件(wordpress): sudo docker
javascript - 了解页面是否被 iframe 化
这个问题已经有答案了: From the server is there a way to know that my page is being loaded in an Iframe (1 个回答)
php - 如何 docker 化
我正在玩小型服务器，试图对运行在其上的服务进行docker化。为简化起见，假设我必须主要处理:Wordpress和另一项服务。在Docker集线器上有许多用于Wordpress的图像，但是它们似乎都
jquery - 如何使我的新注册设计表单实现 AJAX 化？
我想要发生的是，当帐户成功创建后，提交的表单应该消失，并且应该出现一条消息(取决于注册的状态)。如果成功，他们应该会看到一个简单的“谢谢。请检查您的电子邮件。” 如果不是，那么他们应该会看到一条适当
c# - 添加元数据以对客户进行 strip 化
就是这样，我需要为客户添加一个唯一标识符。通过 strip 元数据。这就是我现在完全构建它的方式，但是我只有最后一部分告诉我用户购买了哪个包。我试着看这里: Plans to stripe 代码在这
java - 是否可以出于测试目的将类包私有(private)化
我有一个类将执行一些复杂的操作，涉及像这样的一些计算: public class ComplexAction { public void someAction(String parameter
java - 使用自定义打包类型对遗留项目进行 Maven 化
这个问题已经有答案了: maven add a local classes directory to module's classpath (1 个回答) 已关闭10 年前。我有一些不应更改的旧 E
Android 相互 fragment 化
我使用 fragment 已经有一段时间了，但我经常遇到一个让我烦恼的问题。 fragment 有时会相互吸引。现在，我设法为此隔离了一个用例，它是这样的: Add fragment A(也使用 ad
html - 包含号码的OL strip 化
我的 html 中有一个 ol 列表，上面有行条纹。看起来行条纹是从数字后面开始的。有没有办法让行条纹从数字开始？我已经包含了正在发生的事情的片段 h4:nth-child(even) {
html - 主菜单 html 化
如何仅使用 css 将附加图像 html 化？如果用纯 css 做不到，那我怎么能至少用一个图像来做最佳答案这不是真正的问题，而是您希望我们为您编写代码。我建议您搜索“css breadcrum
java - 锁拆分与锁 strip 化
以下是 Joshua 的 Effective Java 的摘录: If you do synchronize your class internally, you can use various te
http - REST 化 URL
在这里工作时，我们有一个框向业务合作伙伴提供 XML 提要。对我们的提要的请求是通过指定查询字符串参数和值来定制的。其中一些参数是必需的，但很多不是。例如，我们要求所有请求都指定一个 GUID 来标
c - 如何对像素数据进行位 strip 化？
我有 3 个缓冲区，其中包含在 32 位处理器上运行的 R、G、B 位数据。我需要按以下方式组合三个字节: R[0] = 0b r1r2r3r4r5r6r7r8 G[0] = 0b g1g2g3g4
javascript - 需要帮助了解如何对网站进行 ajax 化
我最近发现了关于如何使用 History.js、jQuery 和 ScrollTo 通过 HTML5 History API 对网站进行 Ajax 化的要点:https://github.com/br
spring - Camel 化 Spring 启动应用程序
我们有一个 Spring Boot 应用程序，由于集成需要，它变得越来越复杂——比如在你这样做之后发送一封电子邮件，或者在你之后广播一条 jms 消息等等。在寻找一些更高级别的抽象时，我遇到了 apa
android - 指定Google Pay token 化
我正在尝试首次实施Google Pay。我面临如何指定gateway和gatewayMarchantId的挑战。我所拥有的是google console帐户，不知道在哪里可以找到此信息。 priva
azure - AWVERIFY 未进行属性(property)化
昨天下午 3 点左右，我为两个想要从一个 Azure 帐户转移到另一个帐户的网站设置了 awverify 记录。到当天结束时，Azure 仍然不允许我添加域，所以我赌了一把，将域和 www 子域重新指
elasticsearch - Elasticsearch Facet token 化
我正在使用terms facet在elasticsearch服务器中获取顶级terms。现在，我的标签"indian-government"不被视为一个标签。将其视为"indian" "governm

首页

博学

6Ren·AI

商城

javascript - 如何外部化我的数据