- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在这个链接的帮助下完成了堆叠条形图 https://bl.ocks.org/mbostock/1134768但我想自定义我现有的堆叠图代码,我必须在其中添加 d3.legend 和工具提示。
现在我已经完成了直到工具提示,但是存在标签问题,因为我必须从我的数组数据中给出这样的值 'A:100',如下所示
var data = [
{month: "4/1854",total:"100" ,A: "45", B:"45", C:"10"},
{month: "5/1854",total:"200" ,A:"80", B:"70", C:"50"},
{month: "6/1854",total:"300" ,A:"0", B:"100", C:"200"},
{month: "7/1854",total:"400" ,A: "200", B:"100", C:"100"},
{month: "8/1854",total:"500" ,A:"100", B:"200", C:"200"},
{month: "9/1854",total:"600" ,A:"100", B:"200", C:"300"},
{month: "10/1854",total:"700" ,A: "400", B:"100", C:"200"},
{month: "11/1854",total:"800" ,A:"500", B:"200", C:"100"},
{month: "12/1854",total:"900" ,A:"100", B:"400", C:"500"},
{month: "13/1854",total:"1000" ,A:"500", B:"0", C:"500"}
];
关于 d3.legend,我没有找到任何合适的例子来给我正确的图片,说明如何在我现有的代码中使用它,但我必须像这样展示
这是我的完整工作代码
var xData = ["A", "B", "C"];
var parseDate = d3.time.format("%m/%Y").parse;
var margin = {top: 20, right: 50, bottom: 30, left: 50},
width = 500 - margin.left - margin.right,
height = 350 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .35);
var y = d3.scale.linear()
.rangeRound([height, 0]);
var color = d3.scale.category20();
//console.info(color(0));
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(d3.time.format("%b"));
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var svg = d3.select("#pie").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 + ")");
data.forEach(function(d) {
d.month = parseDate(d.month);
xData.forEach(function(c) {
d[c] = +d[c];
});
})
var dataIntermediate = xData.map(function (c) {
return data.map(function (d) {
return {x: d.month, y: d[c]};
});
});
var dataStackLayout = d3.layout.stack()(dataIntermediate);
x.domain(dataStackLayout[0].map(function (d) {
return d.x;
}));
y.domain([0,
d3.max(data, function(d) { return d.total; })
])
.nice();
var layer = svg.selectAll(".stack")
.data(dataStackLayout)
.enter().append("g")
.attr("class", "stack")
.style("fill", function (d, i) {
console.info(i, color(i));
return color(i);
});
layer.selectAll("rect")
.data(function (d) {
return d;
})
.enter().append("rect")
.attr("x", function (d) {
console.info("dx", d.x,x(d.x), x.rangeBand());
return x(d.x);
})
.attr("y", function (d) {
return y(d.y + d.y0);
})
.attr("height", function (d) {
// console.info(d.y0, d.y, y(d.y0), y(d.y))
return y(d.y0) - y(d.y + d.y0);
})
.attr("width", x.rangeBand() -1)
.on("mouseover", function(d){
var delta = d.y1 - d.y0;
var xPos = parseFloat(d3.select(this).attr("x"));
var yPos = parseFloat(d3.select(this).attr("y"));
var height = parseFloat(d3.select(this).attr("height"))
d3.select(this).attr("stroke","blue").attr("stroke-width",0.8);
svg.append("text")
.attr("x",xPos)
.attr("y",yPos +height/2)
.attr("class","tooltip")
.text(d +": "+ delta);
})
.on("mouseout",function(){
svg.select(".tooltip").remove();
d3.select(this).attr("stroke","pink").attr("stroke-width",0.2);
});
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "axis axis--y")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end");
请提供一些关于我的图表的有用建议,我们将不胜感激。
最佳答案
让我们为 blocks 添加图例和工具提示你提到的(我不能使用你的代码,因为它不完整)。请看下面隐藏片段中的演示(我将数据加载重写为 d3.tsv.parse
以简化示例)。
首先,让我们增加适合 svg 的图例的底部边距:
var margin = {top: 20, right: 50, bottom: 130, left: 20};
这样添加图例(注意注释):
var legend = svg.append("g") // add g element it will be the container for our legend
.attr("transform", "translate(0," + (height + 25) + ")") // move it under the bar cart
.selectAll(".legend")
.data(causes.reverse()) // bind data
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); // put legend items one above the other
legend.append("rect") // append legend items rect
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", function(d, i) { return z(causes.length - 1 - i);}); // set appropriate color with z scale
legend.append("text") // append legend items text
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d; }); // set appropriate text
添加工具提示的最快方法使用d3-tip图书馆。使用 npm
或 script
标签将其添加到您的项目中。
这样定义工具提示:
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(data, cause) {
return "<div class=\"tooltip\">" + cause + ":" + data.y + "</div>";
})
svg.call(tip);
为 rect
元素的 mouseover
和 mouseout
事件附加适当的事件处理函数:
layer.selectAll("rect")
.data(function(d) { return d; })
.enter().append("rect")
.attr("x", function(d) { return x(d.x); })
.attr("y", function(d) { return y(d.y + d.y0); })
.attr("height", function(d) { return y(d.y0) - y(d.y + d.y0); })
.attr("width", x.rangeBand() - 1)
.on('mouseover', function(d,i,j) { tip.show(d, causes[causes.length - 1 - j]); })
.on('mouseout', tip.hide);
注意:如果您使用 d3v4,它适用于 d3v3,您将被迫稍微重写 mouseover
处理函数。
var causes = ["wounds", "other", "disease"];
var parseDate = d3.time.format("%m/%Y").parse;
var margin = {top: 20, right: 50, bottom: 130, left: 20},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width]);
var y = d3.scale.linear()
.rangeRound([height, 0]);
var z = d3.scale.category10();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(d3.time.format("%b"));
var yAxis = d3.svg.axis()
.scale(y)
.orient("right");
var svg = 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 + ")");
var dataAsString = `date total disease wounds other
4/1854 8571 1 0 5
5/1854 23333 12 0 9
6/1854 28333 11 0 6
7/1854 28772 359 0 23
8/1854 30246 828 1 30
9/1854 30290 788 81 70
10/1854 30643 503 132 128
11/1854 29736 844 287 106
12/1854 32779 1725 114 131
1/1855 32393 2761 83 324
2/1855 30919 2120 42 361
3/1855 30107 1205 32 172
4/1855 32252 477 48 57
5/1855 35473 508 49 37
6/1855 38863 802 209 31
7/1855 42647 382 134 33
8/1855 44614 483 164 25
9/1855 47751 189 276 20
10/1855 46852 128 53 18
11/1855 37853 178 33 32
12/1855 43217 91 18 28
1/1856 44212 42 2 48
2/1856 43485 24 0 19
3/1856 46140 15 0 35`;
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(data, cause) {
return "<div class=\"tooltip\">" + cause + ":" + data.y + "</div>";
})
svg.call(tip);
var crimea = d3.tsv.parse(dataAsString, function(item) {
return {
date: parseDate(item.date),
total: +item.total,
disease: +item.disease,
wounds: +item.wounds,
other: +item.other
};
});
var layers = d3.layout.stack()(causes.map(function(c) {
return crimea.map(function(d) {
return {x: d.date, y: d[c]};
});
}));
x.domain(layers[0].map(function(d) { return d.x; }));
y.domain([0, d3.max(layers[layers.length - 1], function(d) { return d.y0 + d.y; })]).nice();
var layer = svg.selectAll(".layer")
.data(layers)
.enter().append("g")
.attr("class", "layer")
.style("fill", function(d, i) { return z(i); });
layer.selectAll("rect")
.data(function(d) { return d; })
.enter().append("rect")
.attr("x", function(d) { return x(d.x); })
.attr("y", function(d) { return y(d.y + d.y0); })
.attr("height", function(d) { return y(d.y0) - y(d.y + d.y0); })
.attr("width", x.rangeBand() - 1)
.on('mouseover', function(d,i,j) { tip.show(d, causes[causes.length - 1 - j]); })
.on('mouseout', tip.hide);
svg.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "axis axis--y")
.attr("transform", "translate(" + width + ",0)")
.call(yAxis);
var legend = svg.append("g")
.attr("transform", "translate(0," + (height + 25) + ")")
.selectAll(".legend")
.data(causes.reverse())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", function(d, i) { return z(causes.length - 1 - i);});
legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d; });
function type(d) {
d.date = parseDate(d.date);
causes.forEach(function(c) { d[c] = +d[c]; });
return d;
}
.axis text {
font: 10px sans-serif;
}
.legend {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 60%;
}
.axis line,
.axis path {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.axis--x path {
display: none;
}
.tooltip {
background-color: lightblue;
border-radius: 5px;
padding: 6px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.js"></script>
关于javascript - 在堆叠条形图中使用图例以及工具提示 d3 js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47324251/
我需要将文本放在 中在一个 Div 中,在另一个 Div 中,在另一个 Div 中。所以这是它的样子: #document Change PIN
奇怪的事情发生了。 我有一个基本的 html 代码。 html,头部, body 。(因为我收到了一些反对票,这里是完整的代码) 这是我的CSS: html { backgroun
我正在尝试将 Assets 中的一组图像加载到 UICollectionview 中存在的 ImageView 中,但每当我运行应用程序时它都会显示错误。而且也没有显示图像。 我在ViewDidLoa
我需要根据带参数的 perl 脚本的输出更改一些环境变量。在 tcsh 中,我可以使用别名命令来评估 perl 脚本的输出。 tcsh: alias setsdk 'eval `/localhome/
我使用 Windows 身份验证创建了一个新的 Blazor(服务器端)应用程序,并使用 IIS Express 运行它。它将显示一条消息“Hello Domain\User!”来自右上方的以下 Ra
这是我的方法 void login(Event event);我想知道 Kotlin 中应该如何 最佳答案 在 Kotlin 中通配符运算符是 * 。它指示编译器它是未知的,但一旦知道,就不会有其他类
看下面的代码 for story in book if story.title.length < 140 - var story
我正在尝试用 C 语言学习字符串处理。我写了一个程序,它存储了一些音乐轨道,并帮助用户检查他/她想到的歌曲是否存在于存储的轨道中。这是通过要求用户输入一串字符来完成的。然后程序使用 strstr()
我正在学习 sscanf 并遇到如下格式字符串: sscanf("%[^:]:%[^*=]%*[*=]%n",a,b,&c); 我理解 %[^:] 部分意味着扫描直到遇到 ':' 并将其分配给 a。:
def char_check(x,y): if (str(x) in y or x.find(y) > -1) or (str(y) in x or y.find(x) > -1):
我有一种情况,我想将文本文件中的现有行包含到一个新 block 中。 line 1 line 2 line in block line 3 line 4 应该变成 line 1 line 2 line
我有一个新项目,我正在尝试设置 Django 调试工具栏。首先,我尝试了快速设置,它只涉及将 'debug_toolbar' 添加到我的已安装应用程序列表中。有了这个,当我转到我的根 URL 时,调试
在 Matlab 中,如果我有一个函数 f,例如签名是 f(a,b,c),我可以创建一个只有一个变量 b 的函数,它将使用固定的 a=a1 和 c=c1 调用 f: g = @(b) f(a1, b,
我不明白为什么 ForEach 中的元素之间有多余的垂直间距在 VStack 里面在 ScrollView 里面使用 GeometryReader 时渲染自定义水平分隔线。 Scrol
我想知道,是否有关于何时使用 session 和 cookie 的指南或最佳实践? 什么应该和什么不应该存储在其中?谢谢! 最佳答案 这些文档很好地了解了 session cookie 的安全问题以及
我在 scipy/numpy 中有一个 Nx3 矩阵,我想用它制作一个 3 维条形图,其中 X 轴和 Y 轴由矩阵的第一列和第二列的值、高度确定每个条形的 是矩阵中的第三列,条形的数量由 N 确定。
假设我用两种不同的方式初始化信号量 sem_init(&randomsem,0,1) sem_init(&randomsem,0,0) 现在, sem_wait(&randomsem) 在这两种情况下
我怀疑该值如何存储在“WORD”中,因为 PStr 包含实际输出。? 既然Pstr中存储的是小写到大写的字母,那么在printf中如何将其给出为“WORD”。有人可以吗?解释一下? #include
我有一个 3x3 数组: var my_array = [[0,1,2], [3,4,5], [6,7,8]]; 并想获得它的第一个 2
我意识到您可以使用如下方式轻松检查焦点: var hasFocus = true; $(window).blur(function(){ hasFocus = false; }); $(win
我是一名优秀的程序员,十分优秀!