- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
这个问题与 D3JS question 非常相似但我使用的是最新的 D3 版本(//d3js.org/d3.v4.min.js)。
我正在尝试制作 this Normalized Stacked Bar Chart水平图表。最新版本有没有优化的方法来实现这个?
我已经交换了 x 轴和 y 轴,如下所示
var svg = d3.select("svg"),
margin = {top: 20, right: 60, bottom: 30, left: 40},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var y = d3.scaleBand()
.rangeRound([0, width])
.padding(0.1)
.align(0.1);
var x = d3.scaleLinear()
.rangeRound([height, 0]);
var z = d3.scaleOrdinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var stack = d3.stack()
.offset(d3.stackOffsetExpand);
d3.csv("data.csv", type, function(error, data) {
if (error) throw error;
data.sort(function(a, b) { return b[data.columns[1]] / b.total - a[data.columns[1]] / a.total; });
y.domain(data.map(function(d) { return d.State; }));
z.domain(data.columns.slice(1));
var serie = g.selectAll(".serie")
.data(stack.keys(data.columns.slice(1))(data))
.enter().append("g")
.attr("class", "serie")
.attr("fill", function(d) { return z(d.key); });
serie.selectAll("rect")
.data(function(d) { return d; })
.enter().append("rect")
.attr("y", function(d) { return y(d.data.State); })
.attr("x", function(d) { return x(d[1]); })
.attr("height", function(d) { return x(d[0]) - x(d[1]); })
.attr("width", y.bandwidth());
g.append("g")
.attr("class", "axis axis--y")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(y));
g.append("g")
.attr("class", "axis axis--x")
.call(d3.axisLeft(x).ticks(10, "%"));
var legend = serie.append("g")
.attr("class", "legend")
.attr("transform", function(d) { var d = d[d.length - 1]; return "translate(" + (y(d.data.State) + y.bandwidth()) + "," + ((x(d[0]) + x(d[1])) / 2) + ")"; });
legend.append("line")
.attr("x1", -6)
.attr("x2", 6)
.attr("stroke", "#000");
legend.append("text")
.attr("y", 9)
.attr("dy", "0.35em")
.attr("fill", "#000")
.style("font", "10px sans-serif")
.text(function(d) { return d.key; });
});
function type(d, i, columns) {
for (i = 1, t = 0; i < columns.length; ++i) t += d[columns[i]] = +d[columns[i]];
d.total = t;
return d;
}
最佳答案
指的是 example
您需要反转域:
var y = d3.scaleBand()
.rangeRound([0, width])
.padding(0.1)
.align(0.1);
var x = d3.scaleLinear()
.rangeRound([height, 0]);
将 x 交换为 y,因为域是相反的,因此当您创建矩形时,x 将变为 y,y 将变为 x。
serie.selectAll("rect")
.data(function(d) {
return d;
})
.enter().append("rect")
.attr("y", function(d) {
return y(d.data.State);
})
.attr("x", function(d) {
return x(d[1]);
})
.attr("width", function(d) {
return x(d[0]) - x(d[1]);
})
.attr("height", y.bandwidth());
相应地更改图例位置以将其定位在顶部栏上。
var legend = serie.append("g")
.attr("class", "legend")
.attr("transform", function(d) {
var d = d[0];//get the top data for placing legends on that.
return "translate(" + ((x(d[0]) + x(d[1])) / 2) + ", " +(y(d.data.State) - y.bandwidth())+ ")";
});
最后定位图例线:
legend.append("line")
.attr("y1", 5)
.attr("x1", 15)
.attr("x2", 15)
.attr("y2", 12)
.attr("stroke", "#000");
工作代码here
关于d3.js - D3 Chart version 4 Normalized Stacked Bar Chart 从垂直到水平,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39700232/
在编写代码时,当我编写 struct *Stack stack 时,代码无法工作,而当我像 struct Stack* stack 那样编写代码时,代码可以工作有人告诉我这两个代码之间的区别吗? 最佳
我的教授要我绘制堆栈吗?他想让我付诸行动吗?我觉得自己很愚蠢,但这不像任何人告诉我的那样!感谢您的帮助。 哇,你们真快。已经谢谢你了。完整的问题是:考虑两个堆栈,每个堆栈的大小为 n(即,每个堆栈最多
是new Stack[N]相当于new Stack[N]对于通用数据类型 Stack ? 编辑:虽然我知道最好避免混合泛型类型和数组,并且存在更强大的解决方案,但我的查询仍然存在:被广泛认可的教科书,
我正在尝试使用堆栈的 printf() 打印 stack.top() 的返回值,但它给出的格式不匹配。代码如下: int main(){ stack cards; char *ch1
我正在尝试做一个 dapp 项目。 我有一个堆栈太深的错误,但我不知道如何解决这个问题。 CompilerError: Stack too deep, try removing local varia
在哪里stack haddock (或 stack build --haddock )放置它生成的文档? 最佳答案 这取决于为“属于”生成黑线鳕的包的位置。 “本地”包的 Haddocks 是堆栈项目
按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
基本上,我有 2 个文件(.adb 和 .ads)。我对 Ada 以及如何编译 2 个文件完全陌生。该程序是一个基本的堆栈实现。编译 .adb 文件时出现此编译错误。 $ gcc -c test_ad
关闭。这个问题需要更多focused .它目前不接受答案。 想改善这个问题吗?更新问题,使其仅关注一个问题 editing this post . 5年前关闭。 Improve this questi
您好,我正在尝试在微服务架构中使用 ELK 堆栈,其中有许多服务分布在许多服务器上。 现在我已经配置了 Kibana 和 ElasticSearch。现在我的疑问是我必须在哪里安装 Logstash。
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开,visit the help center . 关闭 9
我正在学习 Haskell,但遇到了我没想到的异常“堆栈溢出”。 代码相当简单: type Reals = Double prod :: Reals -> Reals -> Reals prod a
在我的 PC(最新的 JDK 和编译器版本)上,我的程序运行得非常顺利。但在我教授的计算机上,她说她遇到了两个错误 1) Stack myStack= new Stack() 类型的非法开始 2) 非
当我尝试在调用跟踪后执行 ./stack.sh 时,我收到以下错误: `[Call Trace] ./stack.sh:217:source /home/work/devstack/stackrc
1 上下文 我参与了一个涉及大量 C 位和 FFI 的 Haskell 项目。所以我发现自己经常运行和重新运行命令,比如 $ stack build $ stack build --force-dir
关于 SO 上的堆栈的问题,终于!我的一生都让我走到了这一步。 所以我需要将我制作的一些相当大的自定义数据结构合并到一个堆栈中。我决定编写一个仅包含一个整数值的最小堆栈结构。这里是 - MODULE
我只是想知道为什么在括号之间嵌入表达式时会得到两个不同的成员列表,例如gl-stack。看起来,如果没有括号,表达式就会被完全求值,并且结果会立即传递到下一个管道组件。但通过括号,集合中的单个对象将被
是否可以保存Stack>在onSaveInstanceState . 是否可以通过另一种方式保存某些特定数据来管理 Activity 状态? 最佳答案 您无法将 View 保存到 bundle 中。无
这个问题已经有答案了: Why don't Java Generics support primitive types? (5 个回答) 已关闭 9 年前。 为什么我不能使用Stack ? 除了拳击之
基于数组的实现级别 #include "stack.h" void creat_stack(Stack *s) { s->Top = 0; } int isFull(Stack s) {
我是一名优秀的程序员,十分优秀!