- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
下面是我的折线图,我使用 2 条线来显示不同的值,
一条线是蓝色的,另一条线是红色的。
但是,红线我想从“12 月 27 日”(图表的一半)开始,而不是图表的开头。我一直在寻找方法来做到这一点,但老实说,我不确定如何才能做到。
如果有人能够向我展示我将非常感激。
提前谢谢您!
这是我的CSS:
path.line {
fill: none;
stroke: #004ecc;
stroke-width: 4px;
}
path.line2 {
fill: none;
stroke: #cc0000;
stroke-width: 4px;
}
path.area {
fill: #e7e7e7;
}
.guideline {
margin-right: 100px;
float: right;
}
.axis path,
.axis line {
fill: none;
stroke-width: 5px;
}
.x.axis path {
display: none;
}
.y.axis path {
display: none;
}
.grid .tick {
stroke: black;
stroke-width: 0.2px;
opacity: 5;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 2px;
}
.graph-column {
float: left;
}
.tablebad thead tr {
background-color: #eee;
}
.tablegood thead tr th {
background-color: #eee;
}
这是我的 d3.js:
<script>
var margin = {
top: 0,
right: 90,
bottom: 30,
left: 50
},
width = 1200 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom,
padding = 1;
var parseDate = d3.time.format("%d-%b-%y").parse;
// Set the ranges
var x = d3.time.scale()
.range([10, width - 15]);
var x2 = d3.scale.ordinal().rangePoints([10, width], .10)
var y = d3.scale.linear()
.range([height, 100]);
var xAxis = d3.svg.axis().scale(x2)
.orient("bottom")
.tickFormat(d3.time.format("%b %d"))
.ticks(4)
.tickPadding(2);
var yAxis = d3.svg.axis().scale(y)
.orient("left");
var valueline = d3.svg.line()
.interpolate("basis")
.x(function(d) {
return x(d.date);
})
.y(function(d) {
return y(d.XMAS);
});
var valueline2 = d3.svg.line()
.interpolate("basis")
.x(function(d) {
return x(d.date);
})
.y(function(d) {
return y(d.JANSALES);
});
//florida
var chart1 = d3.select("#LineChart")
.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 + ")");
//needed for the grid
function make_y_axis() {
return d3.svg.axis()
.scale(y)
.orient("left")
}
data1 = [{
"date": "24-Dec-12",
"XMAS": 2,
"JANSALES": 0
}, {
"date": "25-Dec-12",
"XMAS": 3,
"JANSALES": 0
},
{
"date": "26-Dec-12",
"XMAS": 1,
"JANSALES": 0
},
{
"date": "27-Dec-12",
"XMAS": 2.0,
"JANSALES": 0
},
{
"date": "28-Dec-12",
"XMAS": 4.0,
"JANSALES": 0
},
{
"date": "29-Dec-12",
"XMAS": 4.0,
"JANSALES": 0
}
,
{
"date": "29-Dec-12",
"XMAS": 5,
"JANSALES": 0
},
{
"date": "30-Dec-12",
"JANSALES": 3.0
},
{
"date": "31-Dec-12",
"JANSALES": 2.0
},
{
"date": "01-Jan-13",
"JANSALES": 3.0
},
{
"date": "02-Jan-13",
"JANSALES": 1.0
},
{
"date": "03-Jan-13",
"JANSALES": 3.0
},
{
"date": "04-Jan-13",
"JANSALES": 2.0
},
{
"date": "05-Jan-13",
"JANSALES": 2.0
},
{
"date": "06-Jan-13",
"JANSALES": 1.0
},
{
"date": "07-Jan-13",
"JANSALES": 2.0
},
{
"date": "08-Jan-13",
"JANSALES": 2.0
},
{
"date": "09-Jan-13",
"JANSALES": 3.0
},
{
"date": "10-Jan-13",
"JANSALES": 2.0
},
{
"date": "11-Jan-13",
"JANSALES": 3.0
},
{
"date": "12-Jan-13",
"JANSALES": 3.0
},
{
"date": "13-Jan-13",
"JANSALES": 2.0
},
{
"date": "14-Jan-13",
"JANSALES": 1.0
}
];
var color = d3.scale.ordinal().range(["#004ecc", "#cc0000"]);
//d3.csv("data.csv", function(error, data) {
data1.forEach(function(d) {
d.date = parseDate(d.date);
d.XMAS = +d.XMAS;
d.JANSALES = +d.JANSALES;
});
// Scale the range of the data
x.domain(d3.extent(data1, function(d) {
return d.date;
}));
y.domain([0, 10]);
x2.domain(data1.map(function(d) {
return d.date;
}));
//add the grid
chart1.append("g")
.attr("class", "grid")
.call(make_y_axis()
.tickSize(-width, 0, 0)
.tickFormat("")
)
chart1.append("path")
.attr("class", "line")
.attr("stroke", "red")
.attr("d", valueline(data1));
chart1.append("path")
.attr("class", "line2")
.attr("d", valueline2(data1.filter(function(d) {
return d.date > parseDate("29-Dec-12");
})));
// Add the X Axis
chart1.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
chart1.append("g")
.attr("class", "y axis")
.call(yAxis);
chart1.append("text")
.attr("transform", "translate(" + (width + 3) + "," + y(data1[0].JANSALES) + ")")
.attr("x", ".1em")
.attr("y", "-40")
.attr("text-anchor", "start")
.style("fill", "red")
.style("font-size", "15")
.style("font-weight", "bold")
.text("JAN SALES");
chart1.append("text")
.attr("transform", "translate(" + (width + 3) + "," + y(data1[0].XMAS) + ")")
.attr("x", ".1em")
.attr("y", "10")
.attr("text-anchor", "start")
.style("fill", "steelblue")
.style("font-size", "15")
.style("font-weight", "bold")
.text("XMAS");
//plus 1: animation
var curtain = chart1.append('rect')
.attr('x', -1 * width)
.attr('y', -1 * height - 2)
.attr('height', height)
.attr('width', width)
.attr('class', 'curtain')
.attr('transform', 'rotate(180)')
.style('fill', '#ffffff')
/* Optionally add a guideline */
var guideline = chart1.append('line')
.attr('stroke', '#333')
.attr('stroke-width', 0.4)
.attr('class', 'guide')
.attr('x1', 1)
.attr('y1', 1)
.attr('x2', 1)
.attr('y2', height)
var t = chart1.transition()
.delay(120)
.duration(500)
.ease('linear')
.each('end', function() {
d3.select('line.guide')
.transition()
.style('opacity', 0)
.remove()
});
t.select('rect.curtain')
.attr('width', 0);
t.select('line.guide')
.attr('transform', 'translate(' + width + ', 0)')
d3.select("#show_guideline").on("change", function(e) {
});
</script>
最后这是我的 Div 标签,我在其中调用 d3.js:
<div id="florida"></div>
最佳答案
现在蓝线和红线使用相同的数据集。
如果您希望红线使用不同的数据集,您可以过滤掉不需要的对象:
.attr("d", valueline2(data1.filter(function(d) {
return d.date > parseDate("26-Dec-12");
})));
这是经过更改的代码:
var margin = {
top: 30,
right: 100,
bottom: 30,
left: 50
},
width = 800 - margin.left - margin.right,
height = 280 - margin.top - margin.bottom,
padding = 1;
var parseDate = d3.time.format("%d-%b-%y").parse;
// Set the ranges
var x = d3.time.scale()
.range([10, width - 15]);
var x2 = d3.scale.ordinal().rangePoints([0, width], .25)
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis().scale(x2)
.orient("bottom")
.tickFormat(d3.time.format("%b %d"))
.ticks(4)
.tickPadding(2);
var yAxis = d3.svg.axis().scale(y)
.orient("left");
var valueline = d3.svg.line()
.interpolate("basis")
.x(function(d) {
return x(d.date);
})
.y(function(d) {
return y(d.trump);
});
var valueline2 = d3.svg.line()
.interpolate("basis")
.x(function(d) {
return x(d.date);
})
.y(function(d) {
return y(d.clinton);
});
//florida
var chart1 = d3.select("#florida")
.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 + ")");
//needed for the grid
function make_y_axis() {
return d3.svg.axis()
.scale(y)
.orient("left")
}
data1 = [{
"date": "24-Dec-12",
"trump": 2.0,
"clinton": 0
}, {
"date": "25-Dec-12",
"trump": 3.0,
"clinton": 0
},
{
"date": "26-Dec-12",
"trump": 1.0,
"clinton": 2
},
{
"date": "27-Dec-12",
"trump": 2.0,
"clinton": 0
},
{
"date": "28-Dec-12",
"trump": 4.0,
"clinton": 0
}
,
{
"date": "29-Dec-12",
"trump": 1.0,
"clinton": null
}
];
var color = d3.scale.ordinal().range(["#004ecc", "#cc0000"]);
//d3.csv("data.csv", function(error, data) {
data1.forEach(function(d) {
d.date = parseDate(d.date);
d.trump = +d.trump;
d.clinton = +d.clinton;
});
// Scale the range of the data
x.domain(d3.extent(data1, function(d) {
return d.date;
}));
y.domain([0, 5]);
x2.domain(data1.map(function(d) {
return d.date;
}));
//add the grid
chart1.append("g")
.attr("class", "grid")
.call(make_y_axis()
.tickSize(-width, 0, 0)
.tickFormat("")
)
chart1.append("path")
.attr("class", "line")
.attr("stroke", "red")
.attr("d", valueline(data1));
chart1.append("path")
.attr("class", "line2")
.attr("d", valueline2(data1.filter(function(d) {
return d.date > parseDate("26-Dec-12");
})));
// Add the X Axis
chart1.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
chart1.append("g")
.attr("class", "y axis")
.call(yAxis);
chart1.append("text")
.attr("transform", "translate(" + (width + 3) + "," + y(data1[0].clinton) + ")")
.attr("x", ".1em")
.attr("y", "-40")
.attr("text-anchor", "start")
.style("fill", "red")
.style("font-size", "15")
.style("font-weight", "bold")
.text("JAN SALES");
chart1.append("text")
.attr("transform", "translate(" + (width + 3) + "," + y(data1[0].trump) + ")")
.attr("x", ".1em")
.attr("y", "10")
.attr("text-anchor", "start")
.style("fill", "steelblue")
.style("font-size", "15")
.style("font-weight", "bold")
.text("XMAS");
//plus 1: animation
var curtain = chart1.append('rect')
.attr('x', -1 * width)
.attr('y', -1 * height - 2)
.attr('height', height)
.attr('width', width)
.attr('class', 'curtain')
.attr('transform', 'rotate(180)')
.style('fill', '#ffffff')
/* Optionally add a guideline */
var guideline = chart1.append('line')
.attr('stroke', '#333')
.attr('stroke-width', 0.4)
.attr('class', 'guide')
.attr('x1', 1)
.attr('y1', 1)
.attr('x2', 1)
.attr('y2', height)
var t = chart1.transition()
.delay(120)
.duration(500)
.ease('linear')
.each('end', function() {
d3.select('line.guide')
.transition()
.style('opacity', 0)
.remove()
});
t.select('rect.curtain')
.attr('width', 0);
t.select('line.guide')
.attr('transform', 'translate(' + width + ', 0)')
d3.select("#show_guideline").on("change", function(e) {
guideline.attr('stroke-width', this.checked ? 1 : 0);
curtain.attr("opacity", this.checked ? 0.75 : 1);
});
path.line {
fill: none;
stroke: #004ecc;
stroke-width: 4px;
}
path.line2 {
fill: none;
stroke: #cc0000;
stroke-width: 4px;
}
path.area {
fill: #e7e7e7;
}
.guideline {
margin-right: 100px;
float: right;
}
.axis path,
.axis line {
fill: none;
stroke-width: 5px;
}
.x.axis path {
display: none;
}
.y.axis path {
display: none;
}
.grid .tick {
stroke: black;
stroke-width: 0.2px;
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="florida"></div>
这只是其中一种方法。还有其他方法,例如使用 line.define
和 null 值。
关于javascript - 使用 D3 的线图不是从我想要的日期开始,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43797864/
我正在练习课本上的练习,但无法获得应有的输出。 这是我所拥有的: #include #include #include //Initialize OpenGL void init(void) {
我有一系列的点,我将把它们变成图表上的一条线。我想要的是给图表下方的区域进行渐变填充。它看起来有点类似于这样的彭博图表; 我的问题实际上分为三个部分; 首先,我应该如何只填充图表下方的区域? 第二,如
我正在尝试根据数组中保存的数据绘制折线图。我已经成功绘制了 X 轴和 Y 轴。然而,当我在图表上绘制带有数据的线时,它与 X 轴和 Y 轴值不对齐。我不确定如何解决这个问题。我已经展示了下面的代码:
我有一个对象 DataEntry 定义如下: public class DataEntry { private long timestamp; private double value; public
我正在使用 MPAndroidChart-v2.1.6,我面临以下问题。 当我有一个数据条目时,它开始在 X 轴上显示从 0 索引开始的值。这就是它的样子。 当我只有一个数据输入时,我希望它居中对齐,
我有一个 pandas 数据框,看起来像这样 - Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec Marks 0 30 31 29 1
enter image description here嗨, 我正在尝试重新创建我们看到的一些 covid-19 图表。我正在使用来自约翰霍普金斯大学数据库的数据。 数据的排列方式是城市名称在行中,列
我正在使用 Pandas 来绘制一些数据。 如果我绘制这个: import pandas as pd import matplotlib.pyplot as plt df = pd.DataFrame
当我使用 Seaborn 在同一轴上绘制多个线图时,不会创建任何图例。即使我在 sns.lineplot 中为图例提供参数“brief”或“full”,也不会显示任何内容,并且调用 ax.get_le
根据 Shanes 优秀 solution另一个问题,我现在意识到我不知道该怎么做。 我最初的方法是使用融化数据(再次感谢 shane): dm1 <- melt(d[,c("Type","I.alt
我有一个多索引数据框,两个索引是 Sample 和 Lithology Sample 20EC-P 20EC-8 20EC-10-1 ... 20EC-43
我有一个关于 ggplot2 中的图例的问题。我设法在同一张图中绘制了三条线,并想添加使用三种颜色的图例。这是使用的代码 library(ggplot2) ## edit from original
我如何使用 seaborn 中的 lineplot 绘图功能来创建点之间没有连接线的绘图。我知道该函数称为 lineplot,但它具有合并所有具有相同 x 值的数据点并绘制单个均值和置信区间的有用功能
我如何使用 seaborn 中的 lineplot 绘图功能来创建点之间没有连接线的绘图。我知道该函数称为 lineplot,但它具有合并所有具有相同 x 值的数据点并绘制单个均值和置信区间的有用功能
我昨天发布了类似的内容,但什么也没得到。我今天花了几个小时解决问题,但没有取得任何进展。 我正在使用处理(语言)并尝试实现一种在两点之间绘制一条线的方法。 (我不想使用库的 line() 方法。) 我
我有一个如下所示的数据框 df: ind group people value value_50 1 1 5 100 1 1 2 2 90
我正在使用 seaborn.lineplot()创建一个像这样的线图(一条代表平均值的线,被一个代表标准的带包围): sns.lineplot(x="trial", y="rvalues", hue=
我有 jqplot 线图,其中 y 轴作为金额,x 轴作为日期。我需要详细说明将鼠标悬停在图表线上时显示的金额。如果有人知道请重播。谢谢.... 最佳答案 您尝试过荧光笔插件吗? http://www
我已经实现了折线图,并且运行良好。但对于某些值,该线不可见或被切断。我附上了截图。对于诸如 [Entry, x: 0.0 y: 0.0, Entry, x: 1.0 y: 0.0, Entry, x:
我正在尝试改编动画线图示例,来自:http://bl.ocks.org/benjchristensen/1148374 function draw(id, width, height, u
我是一名优秀的程序员,十分优秀!