首页 / JAVASCRIPT / Javascript-在此d3.js日历视图中包含json吗？

Javascript-在此d3.js日历视图中包含json吗？

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Javascript-在此d3.js日历视图中包含json吗？，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6379字，纯文字阅读大概需要10分钟。

内容图文

我是d3图表和javascript的新手,这是一场艰苦的战斗.

经过一堆研究,我能够用CSV文件填充图表.所以现在,我试图用json数据填充图表.

这是我的代码.它大致基于this example.但是我更喜欢使用我的代码(即d3.v4)：

var width = 960,
  height = 136,
  cellSize = 17;

var color = d3.scaleQuantize()
  .domain([9000, 12000])
  .range(["Blue", "Red", "Green", "Yellow", "Purple", "Black"]);
var dateParse = d3.timeFormat("%Y-%m-%d");
var svg = d3.select("body")
  .selectAll("svg")
  .data(d3.range(2017, 2018))
  .enter().append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + ((width - cellSize * 53) / 2) + "," + (height - cellSize * 7 - 1) + ")");

svg.append("text")
  .attr("transform", "translate(-6," + cellSize * 3.5 + ")rotate(-90)")
  .attr("font-family", "sans-serif")
  .attr("font-size", 10)
  .attr("text-anchor", "middle")
  .text(function(d) {
    return d;
  });

var rect = svg.append("g")
  .attr("fill", "none")
  .attr("stroke", "#ccc")
  .selectAll("rect")
  .data(function(d) {
    return d3.timeDays(new Date(d, 0, 1), new Date(d + 1, 0, 1));
  })
  .enter().append("rect")
  .attr("width", cellSize)
  .attr("height", cellSize)
  .attr("x", function(d) {
    return d3.timeWeek.count(d3.timeYear(d), d) * cellSize;
  })
  .attr("y", function(d) {
    return d.getDay() * cellSize;
  })
  .datum(d3.timeFormat("%Y-%m-%d"));

svg.append("g")
  .attr("fill", "none")
  .attr("stroke", "#000")
  .selectAll("path")
  .data(function(d) {
    return d3.timeMonths(new Date(d, 0, 1), new Date(d + 1, 0, 1));
  })
  .enter().append("path")
  .attr("d", pathMonth);

d3.json("data3.json", function(error, data) {
  //populating data since i don't have the file
  data = [{
    "date": "2017-01-04",
    "open": 10430.69
  }, {
    "date": "2017-01-05",
    "open": 10584.56
  }];

  data.forEach(function(d) {
    d.dd = dateParse(new Date(d.date));
    console.log(d.dd);
  });

  var nest = d3.nest()
    .key(function(d) {
      return d.dd;
    })
    .map(data);

  rect.filter(function(d) {
      return d in data;
    })
    .attr("fill", function(d) {
      return color(data[d]);
    })
    .append("title")
    .text(function(d) {
      return d + ": " + data[d];
    });
});

function pathMonth(t0) {
  var t1 = new Date(t0.getFullYear(), t0.getMonth() + 1, 0),
    d0 = t0.getDay(),
    w0 = d3.timeWeek.count(d3.timeYear(t0), t0),
    d1 = t1.getDay(),
    w1 = d3.timeWeek.count(d3.timeYear(t1), t1);
  return "M" + (w0 + 1) * cellSize + "," + d0 * cellSize +
    "H" + w0 * cellSize + "V" + 7 * cellSize +
    "H" + w1 * cellSize + "V" + (d1 + 1) * cellSize +
    "H" + (w1 + 1) * cellSize + "V" + 0 +
    "H" + (w0 + 1) * cellSize + "Z";
}

<script src="http://d3js.org/d3.v4.min.js"></script>

解决方法:

您的代码需要进行一些更改.这些主要与使用数据而不是嵌套有关,并且与d3 v3相比,d3 v4进行了较小的更改(我无法找到相关信息).

过滤

首先,您没有正确过滤数据：

您不想这样过滤：

return d in data;

in运算符用于对象的属性,数据是数组.
您想按嵌套过滤(如示例中所示)：

return d in nest;

其次,至少在我的简短测试中,d3.nest在d3 v4中的行为略有不同(这可能取决于版本,我在下面的代码段中使用了4.9.1(分钟)).当使用以数字开头的键时,使用d3.nest时,d3似乎在每个键的开头都附加了美元符号：

D3v4示例：

data = [{
    "date": "2017-01-04", "open": 10430.69
  }, {
    "date": "2017-01-05", "open": 10584.56
  }];

  var nest = d3.nest()
    .key(function(d) { return d.date; })
    .map(data);
	
	console.log(nest);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>

与D3v3相比：

data = [{
    "date": "2017-01-04", "open": 10430.69
  }, {
    "date": "2017-01-05", "open": 10584.56
  }];

  var nest = d3.nest()
    .key(function(d) { return d.date; })
    .map(data);
	
	console.log(nest);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

如果您看到此行为,则需要相应地更改过滤器：

return ("$" + d) in nest;

访问嵌套属性

第三,由于数据只是一个数组,由于d将是一个日期字符串,因此data [d]不太可能获得预期的结果,因此您需要访问nest对象.记录嵌套可能有助于查找适当的属性.代替：

return color(data[d]);

尝试：

return color(nest[("$" + d)][0].open);

这与问题中的链接示例非常相似(除了该美元符号以外).

优化

与您最近的另一个question相关,此代码

    var date = "2017-01-02";
    var dateParse = d3.timeFormat("%Y-%m-%d");
    console.log(dateParse(new Date(date)));

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>

什么也没做.它接受一个表示日期的字符串,并将其转换为日期对象,然后将其转换回与开始时相同的字符串表示形式.您可以删除这部分代码,它已在链接的示例中使用,因为它是从m / d / Y日期字符串转换为日期对象,然后转换为Y-m-d日期字符串.您的初始日期格式已经是您想要的格式,因此无需修改它.仅使用：

  var nest = d3.nest()
    .key(function(d) {
      return d.date;
    })
    .map(data);

而不是：

  data.forEach(function(d) {
    d.dd = dateParse(d.date);
  });

  var nest = d3.nest()
    .key(function(d) {
      return d.dd;
    })
    .map(data);

结果

这些更改(为了使示例更简单,我删除了文本,删除了外部文件引用等)导致：

var width = 960,
  height = 136,
  cellSize = 17;

var color = d3.scaleQuantize()
  .domain([9000, 12000])
  .range(["Blue", "Red", "Green", "Yellow", "Purple", "Black"]);
  
var dateFormat = d3.timeFormat("%Y-%m-%d");

var svg = d3.select("body")
  .selectAll("svg")
  .data(d3.range(2017, 2018))
  .enter().append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + ((width - cellSize * 53) / 2) + "," + (height - cellSize * 7 - 1) + ")");

var rect = svg.append("g")
  .attr("fill", "none")
  .attr("stroke", "#ccc")
  .selectAll("rect")
  .data(function(d) {
    return d3.timeDays(new Date(d, 0, 1), new Date(d + 1, 0, 1));
  })
  .enter().append("rect")
  .attr("width", cellSize)
  .attr("height", cellSize)
  .attr("x", function(d) {
    return d3.timeWeek.count(d3.timeYear(d), d) * cellSize;
  })
  .attr("y", function(d) {
    return d.getDay() * cellSize;
  })
  .datum(dateFormat);

svg.append("g")
  .attr("fill", "none")
  .attr("stroke", "#000")
  .selectAll("path")
  .data(function(d) {
    return d3.timeMonths(new Date(d, 0, 1), new Date(d + 1, 0, 1));
  })
  .enter().append("path")
  .attr("d", pathMonth);

  data = [{
    "date": "2017-01-04",
    "open": 10430.69
  }, {
    "date": "2017-01-05",
    "open": 10584.56
  }];

  var nest = d3.nest()
    .key(function(d) {
      return d.date;
    })
    .map(data);

	rect.filter(function(d) {
      return ("$" + d) in nest;
    })
    .attr("fill", function(d) { 
      return color(nest[("$" + d)][0].open);
    })


function pathMonth(t0) {
  var t1 = new Date(t0.getFullYear(), t0.getMonth() + 1, 0),
    d0 = t0.getDay(),
    w0 = d3.timeWeek.count(d3.timeYear(t0), t0),
    d1 = t1.getDay(),
    w1 = d3.timeWeek.count(d3.timeYear(t1), t1);
  return "M" + (w0 + 1) * cellSize + "," + d0 * cellSize +
    "H" + w0 * cellSize + "V" + 7 * cellSize +
    "H" + w1 * cellSize + "V" + (d1 + 1) * cellSize +
    "H" + (w1 + 1) * cellSize + "V" + 0 +
    "H" + (w0 + 1) * cellSize + "Z";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>

内容总结

以上是互联网集市为您收集整理的Javascript-在此d3.js日历视图中包含json吗？全部内容，希望文章能够帮你解决Javascript-在此d3.js日历视图中包含json吗？所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/689995.html

来源：【匿名】

【上一篇】使用来自javascript的索引获取弹簧模型属性列表元素【下一篇】javascript 怎么调用php方法

更多 ►

【Javascript-在此d3.js日历视图中包含json吗？】教程文章相关的互联网学习教程文章

javascript-BackboneJS-缓存视图实例【代码】

我正在编写一个BackboneJS应用,其中六个选项卡中的每个选项卡均由各自的视图表示.我是否应该保存视图的实例,并在用户单击曾经去过的选项卡时仅调用它的render()函数？还是创建一个新实例并访问jQuery在第一次渲染期间为我缓存的模板？如果执行后者,则仍需要确保未通过我的JSON API提取另一个集合,因为这是在某些视图初始化期间完成的. 现在,我将所有视图实例存储在控制器中,但我想知道这是内置的还是有更好的选择. 干杯. 更新：这...

javascript – 部分视图表单通过ajax提交以返回部分视图【代码】

我陷入两难境地.请发送帮助！我正在构建一个MVC 4 Web应用程序,当加载另一个局部视图的表单时,无法获得部分视图加载到页面的一部分.这是我到目前为止所做的：在基页(ReviewPage)上,我有一个部分在加载页面时加载部分视图.像这样的东西：@model AppV4.Models.NewCompanyRequest@{ViewBag.Title = "ReviewNewRequest"; }<h2>New Sign Up Review</h2><div class="container"><div class="row"><div class="col-lg-8 col-md-8"><div ...

javascript-jQuery CouchDB-筛选器视图键【代码】

我正在使用与ouchdb捆绑在一起的javascript库来查询数据库. On a side note here is a good overview of the functionality it provides, with a lot of good examples. 通过指定要返回的键值,可以从视图中过滤结果.使用查询字符串(documentation)可以轻松完成此操作,但是如何使用javascript API呢？这就是我使用查询字符串的方式(请注意,键值对的JSON部分需要进行HTML编码)：http://localhost:5984/MyDocuments/_design/MyDesign...

如何添加Javascript库以在CouchDB视图中使用

免责声明：我正在审查CouchDB的新项目,所以我对其内部工作原理还不太熟悉. 如何在CouchDB中引入Javascript库,以便在MapReduce视图中使用它？解决方法:看看这个问题的答案(所有这些),他们描述了一系列可能的解决方案： How do I DRY up my CouchDB views?

javascript – 没有视图的Angular 2组件【代码】

是否可以在不使用模板或@View的情况下使用Angular 2？我正在寻找类似于您在示例中执行以下操作的方式：角度1 的index.html<div ng-controller="appcontroller"> <div ng-class="{active: isActive()}">..... </div> </div>app.jsangular.module('app', []).controller('appcontroller', function(){ $scope.isActive = function(){return true; } });如果可能的话,我猜它会看起来像这样： Angular 2 的index.html<app> <div [ngc...

Javascript-Backbone.js视图中的this.el到底是什么？

我对Backbone视图中el的含义感到困惑.一些教程(例如this one)使el看起来像是正在创建的视图的父级,其中render方法应该将视图附加到其el上.其他人(例如this)则将其视为视图本身的元素.是否有关于此的最佳实践？解决方法:el绝对是视图对应的元素,而不是其父元素.在您的第一个示例中,他们将整个页面主体视为视图,然后在呈现时插入组成该视图的组件.我想这可能适合代表整个页面的顶级视图.骨干网为您提供了很大的灵活性(例如,用来挂绳的...

Yii控制器中操作视图js的方法

本文实例讲述了Yii控制器中操作视图js的方法。分享给大家供大家参考，具体如下： //YII framework路径 Yii::getFrameworkPath(); //protected/runtime Yii::app()->getRuntimePath(); //protected/venders目录 Yii::import(application.venders.*); //或在protected/config/main.php说明 import=>array(//......application.venders.*, ), //插入meta信息 Yii::app()->clientScript->registerMetaTag(keywords,关键字); Yii::app()...

如何使用Backbone.js创建一个简单的视图【图】

如何使用Backbone.js创建一个简单的视图？本篇文章给大家介绍的内容是关于使用Backbone.js创建一个简单的视图的方法，下面我们来看具体的内容。示例1：代码如下创建以下HTML文件。<!DOCTYPE html> <html> <head><meta charset="utf-8" /><title></title><script src="jquery-3.2.1.js"></script> <script src="underscore.js"></script><script src="backbone.js"></script><script type="text/javascript">$(function () {var CVi...

Vue.set如何实现视图随着对象修改而动态变化（可多选）【图】

本篇文章给大家带来的内容是关于Vue.set如何实现视图随着对象修改而动态变化（可多选），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。通过数组的变异方法我们可以让视图随着数据变化而变化。但Vue 不能检测对象属性的添加或删除，即如果操作对象数据变化，视图是不会随着对象数据变化而变化的。使用Vue.set()可以帮助我们解决这个问题。需求：可多选的列表：初始代码：准备好的数据： tag: [{ name: "马化腾" ...

关于NodeJS框架Express的模板视图机制分析

这篇文章主要介绍了关于NodeJS框架Express的模板视图机制分析，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下MVC模式可谓无人不知，它除了能增强团队协作的效率，还可方便产品的维护升级，本文我们将对Express框架的模板和视图（V）相关功能进行介绍。模板引擎Express支持许多模板引擎，常用的有：haml 的实现Hamlhaml.js 接替者，同时也是Express的默认模板引擎Jade嵌入JavaScript模板EJS基于CoffeeScript的模板...

关于vue数据控制视图源码的分析

这篇文章主要介绍了关于vue数据控制视图源码的分析，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下分析vue是如何实现数据改变更新视图的。前记三个月前看了vue源码来分析如何做到响应式数据的, 文章名字叫vue源码之响应式数据, 最后分析到, 数据变化后会调用Watcher的update()方法. 那么时隔三月让我们继续看看update()做了什么. (这三个月用react-native做了个项目, 也无心总结了, 因为好像太简单了).本文叙事方...

使用Javascript如何开发二维周视图日历【图】

这篇文章主要给大家介绍了关于利用Javascript如何开发一个二维周视图日历的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。前言本文给大家介绍了Javascript开发二维周视图日历的相关内容，即之前实现了一个月视图日历，我们今天来实现一个二维周视图的日历。以下进行分析其中的关键部分。结构准备不同之处在于其在日历的基础上还有一个分类轴...

通过vuejs如何实现数据驱动视图原理【图】

这篇文章主要介绍了浅谈vuejs实现数据驱动视图原理，现在分享给大家，也给大家做个参考。什么是数据驱动数据驱动是vuejs最大的特点。在vuejs中，所谓的数据驱动就是当数据发生变化的时候，用户界面发生相应的变化，开发者不需要手动的去修改dom。比如说我们点击一个button，需要元素的文本进行是和否的切换。在jquery刀耕火种的年代中，对于页面的修改我们一般是这样的一个流程，我们对button绑定事件，然后获取文案对应的元素dom对...

在vue中处理对象属性改变视图不更新问题？

下面我就为大家分享一篇解决vue中对象属性改变视图不更新的问题，具有很好的参考价值，希望对大家有所帮助。常规情况下我们在vue实例的data中设置响应数据。但当数据为对象，我们增加或删除对象属性值时，视图并不触发更新，如何解决这个问题呢？实例代码如下：let vm = new Vue{el: #app,data: {obj: {k: v}},... }有三种解决方案：方案一：利用Vue.set(object,key,val)例：Vue.set(vm.obj,k1,v1)方案二：利用this.$set(this.obj,...

vue.js移动数组位置,同时更新视图的方法【图】

下面我就为大家分享一篇vue.js移动数组位置,同时更新视图的方法，具有很好的参考价值，希望对大家有所帮助。使用vue.js v-for绑定若干个选项，需要对选项进行排序上下移动操作。需要对options里面数组的位置进行交换，通常是这样来写：假设向前移动一个：var index = this.options.indexOf(option); //获取当前选项对象在数组里面的索引。 var tempOption = this.options[index-1]; //存储前一个 this.options[index-1] = option;(...

首页 / JAVASCRIPT / Javascript-在此d3.js日历视图中包含json吗？

Javascript-在此d3.js日历视图中包含json吗？

内容导读

内容图文

内容总结

内容备注

内容手机端

【Javascript-在此d3.js日历视图中包含json吗？】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

JSON - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程