- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我需要从x轴(从下到上)的过渡。但现在我正在从上到下进行栏过渡。我已经使用 d3.js 和 Json 对象来实现相同的目的。
Js代码如下:
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 600 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .6);
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")
.ticks(10);
var svgBar = d3.select("body").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 + ")");
d3.json("data.json", function(error, data) {
function type(d) {
d.Speed = +d.Speed;
}
x.domain(data.map(function(d) { return d.Days; }));
y.domain([0, d3.max(data, function(d) { return d.Speed; })]);
svgBar.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svgBar.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("Speed");
var graphTransition = svgBar.selectAll("bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.Days); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.Speed); })
.attr("height",0);// Initial Height at loading
graphTransition
.transition()
.attr("height", function(d) { return height - y(d.Speed); }) //Bar height after transition
.duration(1000);
});
Json如下:
[
{"Days":"Mon","Speed":150},
{"Days":"Tue","Speed":200}
]
我可能错过了一件愚蠢的事情。感谢任何帮助,并提前致谢。
最佳答案
试试这个
var graphTransition = svgBar.selectAll("bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.Days); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return height; })
.attr("height",0);
graphTransition
.transition()
.delay(100)
.attr("height", function(d) { return height - y(d.Speed); })
.attr("y", function(d) { return y(d.Speed); })
.duration(1000);
关于javascript - 从 x 轴过渡 :Bar Chart,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21377445/
鉴于 foo.bar是一个模块,有什么区别 import foo.bar as bar 和 from foo import bar 我对延迟导入模块对此有何影响特别感兴趣。 注意:这不是 this q
我正在寻找一个选项来创建组合了 1 个条形图(每个索引)和 2 个条形图的条形图。 像这样: 我可以假装制作一个 2 条形图,将 0 放入第一组条形图,然后手动绘制一个条形图……但是有更优雅的方法吗?
这只是编写相同代码的两种方式吗?有什么我应该注意的功能差异吗? >>> a = 'foo' >>> if not a == 'bar': ... 'its not' ... 'its not'
通常条形图中的条形并排对齐。我怎样才能让它们位于前一个之上?所以我会考虑创建我已经拥有的系列并将它们添加到渲染器,但告诉渲染器将新系列放在现有系列之上,而不是将其放在现有系列旁边。仅计算最大值并仅显示
我试图在 Amchart 4 中点击条形图/列时突出显示条形图/列。使用下面的代码,我正在获取当前点击的条形图/列的值,但使用的是 column.isActive 属性,条形/列未突出显示。 我找到了
我正在名为“tests”的文件夹中处理大量 qunit 单元测试。每个文件的顶部如下所示,例如: moduleFor('mixin:foo') // or moduleFor('route:bar')
我在 pyTorch 和 matplotlib 中看到了这个约定: import torch.nn as nn import torch.optim as optim import matplotli
与我的示例平行的是,我正在构建一个游戏并有一个名为 player.lua 的类。 几周前我编写了这个代码,当时我还不太了解 Lua 的工作原理,所以我没有为播放器构建的表格。 我已经为玩家分配了各种属
一个简单的例子: void foo(class Bar * bar) { foo2(bar); } void foo2(Bar * bar) { bar->a++; } foo2 中使
原始需求:我想实现一个将Foo::*转换为Bar::*的宏。 伪代码将如下所示: macro_rules! convert_foo_to_bar { ($v: ty, $p: path) =>
出于好奇。我检查某个字符串是否超过指定的最大长度: var name = "This Is a Name"; if (!name.length >= 10) { //valid length
之间有什么区别 export * as bar from 'foo' 和 export { default as bar } from 'foo' 在我的特殊情况下,我尝试了以下两种方法,它们都有效,
以下代码会返回错误, $ perl -E'sub foo { my $bar if 0; $bar++ }' This use of my() in false conditional is no l
我需要知道一些语言提供的这个很酷的特性的正确名称。 仅供引用:在某些语言中,可以通过将值结构分配给“变量”结构来进行多重分配。在问题标题的示例中,它将“foo”分配给 foo,将“bar”分配给 ba
这个问题在这里已经有了答案: 关闭 11 年前。 Possible Duplicate: What is the difference between object keys with quotes
我们要搜索一个文件以找到前面没有“foo”的“bar”的所有实例(忽略前面的空格和后面的任何内容。) 所以如果我们有 foo foo bar baz bar a bunch of monkey
这是一个 SSCCE : import java.util.*; class Test { public static void main(String[] args) { b
我正在开发一个插件,该插件将添加到外部站点,例如 Meebo/Wibiya 栏。我正在研究如何对我的文件进行版本控制。 我想要实现的目标: 网站只需添加几行到他们的网站。 如果我选择的话,我将能够以静
我需要在没有省略号的情况下显示标签中的所有文本,但我无法预测标签将占用的行数。 是否可以在每个标签和展示之间留出一些边距中心的条与标签对齐? (有或没有改变每条之间的距离) 是否可以计算每个条之间的距
1. struct thread_args { 2. int thread_id; 3. struct timeval before; 4. struct timeval after
我是一名优秀的程序员,十分优秀!