gpt4 book ai didi

javascript - 沿 d3.js 面积图中的轴删除轮廓

转载 作者:行者123 更新时间:2023-11-30 20:40:31 26 4
gpt4 key购买 nike

我创建了一个带有白色填充和红色轮廓的面积图:

enter image description here

它工作正常,但我想去掉 X 轴和 Y 轴上的红色轮廓,只留下代表实际数据的轮廓。因此,在上面的屏幕截图中,我想删除沿轴垂直和水平跟踪的红线。

我当前的代码:

x.domain(d3.extent(data, function(d) { return d.date; }));
if(full){
y.domain([0, 1.1*d3.max(data, function(d) { return d.value; })]);
area.y0(y(0));
} else {
y.domain([0.98*d3.min(data, function(d) { return d.value; }), 1.02*d3.max(data, function(d) { return d.value; })]);
area.y0(y(0.98*d3.min(data, function(d) { return d.value; })));
}

g.append("path")
.datum(data)
.attr("fill", "#fff")
.attr("stroke", "#fa0d18")
.attr("d", area);

g.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x).tickFormat(d3.timeFormat("%m/%d")))
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-65)");

g.append("g")
.call(d3.axisLeft(y))
.append("text")
.attr("fill", "#000")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("text-anchor", "end")
.text("Price ($)");

这可能吗?如何实现?

附言请忽略屏幕中间的灰色垂直线,它与此处无关。

最佳答案

目前红线是 stroke 属性的结果(你可以删除这个属性,然后看到红线消失了):

g.append("path")
.datum(data)
.attr("fill", "#fff")
.attr("stroke", "#fa0d18") // <== !!!
.attr("d", area);

我用 this blocks 模拟了你的问题作为依据。请参阅下面的隐藏代码段:

var dataAsCSV = `date,close
1-May-12,58.13
30-Apr-12,53.98
27-Apr-12,67.00
26-Apr-12,89.70
25-Apr-12,99.00
24-Apr-12,130.28
23-Apr-12,166.70
20-Apr-12,234.98
19-Apr-12,345.44
18-Apr-12,443.34
17-Apr-12,543.70
16-Apr-12,580.13
13-Apr-12,605.23
12-Apr-12,622.77
11-Apr-12,626.20
10-Apr-12,628.44
9-Apr-12,636.23
5-Apr-12,633.68
4-Apr-12,624.31
3-Apr-12,629.32
2-Apr-12,618.63
30-Mar-12,599.55
29-Mar-12,609.86
28-Mar-12,617.62
27-Mar-12,614.48
26-Mar-12,606.98`;

// set the dimensions and margins of the graph
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;

// parse the date / time
var parseTime = d3.timeParse("%d-%b-%y");

// set the ranges
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);

// define the area
var area = d3.area()
.x(function(d) { return x(d.date); })
.y0(height)
.y1(function(d) { return y(d.close); });

// append the svg obgect to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
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 + ")");

const data = d3.csvParse(dataAsCSV);

// format the data
data.forEach(function(d) {
d.date = parseTime(d.date);
d.close = +d.close;
});

// scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.close; })]);

// add the area
svg.append("path")
.data([data])
.attr("class", "area")
.attr("stroke", "#fa0d18")
.attr("d", area);

// add the X Axis
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));

// add the Y Axis
svg.append("g")
.call(d3.axisLeft(y));
.area {
fill: lightsteelblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.js"></script>

要绘制代表实际数据的红线,您必须执行三个步骤(您有另一个数据集,因此您应该使用适当的属性名称 - valuedate正如我从您的代码中看到的那样):

1) 移除stroke属性。

2)这样指定画线的函数:

var valueline = d3.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); });

3) 画线:

  svg.append("path")
.data([data])
.attr('fill', 'none')
.attr('stroke', '#fa0d18')
.attr("class", "line")
.attr("d", valueline);

在下面的隐藏演示中查看结果:

var dataAsCSV = `date,close
1-May-12,58.13
30-Apr-12,53.98
27-Apr-12,67.00
26-Apr-12,89.70
25-Apr-12,99.00
24-Apr-12,130.28
23-Apr-12,166.70
20-Apr-12,234.98
19-Apr-12,345.44
18-Apr-12,443.34
17-Apr-12,543.70
16-Apr-12,580.13
13-Apr-12,605.23
12-Apr-12,622.77
11-Apr-12,626.20
10-Apr-12,628.44
9-Apr-12,636.23
5-Apr-12,633.68
4-Apr-12,624.31
3-Apr-12,629.32
2-Apr-12,618.63
30-Mar-12,599.55
29-Mar-12,609.86
28-Mar-12,617.62
27-Mar-12,614.48
26-Mar-12,606.98`;

// set the dimensions and margins of the graph
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;

// parse the date / time
var parseTime = d3.timeParse("%d-%b-%y");

// set the ranges
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);

// define the area
var area = d3.area()
.x(function(d) { return x(d.date); })
.y0(height)
.y1(function(d) { return y(d.close); });

// define the line
var valueline = d3.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); });

// append the svg obgect to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
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 + ")");

const data = d3.csvParse(dataAsCSV);

// format the data
data.forEach(function(d) {
d.date = parseTime(d.date);
d.close = +d.close;
});

// scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.close; })]);

// add the area
svg.append("path")
.data([data])
.attr("class", "area")
.attr("d", area);

// add the valueline path.
svg.append("path")
.data([data])
.attr('stroke', '#fa0d18')
.attr('fill', 'none')
.attr("class", "line")
.attr("d", valueline);

// add the X Axis
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));

// add the Y Axis
svg.append("g")
.call(d3.axisLeft(y));
.area {
fill: lightsteelblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.js"></script>

关于javascript - 沿 d3.js 面积图中的轴删除轮廓,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49319648/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com