【发布时间】：2021-02-07 13:08:30
【问题描述】：
有谁知道我将如何在我制作的 d3 折线图的背景中添加一个网格，谁知道我将如何制作我的折线图曲线，而不是像现在这样僵硬。下面的代码是用于折线图的，它都适用于我拥有的数据文件我只需要它在背景上有一个网格并弯曲而不是现在的样子。我还需要让 y 轴显示百分比而不是小数 任何帮助将不胜感激。
JS、CSS 和 HTML --
var margin = { top: 20 , right: 20, bottom: 30 , left: 40} ,
width= 960 - margin.left - margin.right ,
height = 500 - margin.top - margin.bottom;
var y = d3.scaleLinear()
.range([height, 0]) ; //remember: up / down are flipped
var x = d3.scaleBand()
.range([0, width]).padding([0.1]); //the last peramter adds padding
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(event,d) {
return "<strong>Frequency:</strong> <span style='color: rgba(223,222,79,255)'>" + d.frequency + "</span>";
})
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 + ")");
svg.call(tip);
d3.csv("data/data.csv").then(function(data) {
x.domain(data.map(function(d){return d.letter;}));
y.domain([0, d3.max(data, function(d){return d.frequency;})]);
// Remember to add all data dependant calls in here
var xAxis = d3.axisBottom().scale(x); // Positions the Lables Under the xAxis
var yAxis = d3.axisLeft().scale(y); // positions the lables on the left of the yAxis
var line = d3.line()
.x(function(d) { return x(d.letter); })
.y(function(d) { return y(d.frequency); })
x.domain(data.map(function(d) { return d.letter; }));
y.domain([0, d3.max(data, function(d) { return d.frequency; })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
svg.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("Frequency");
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
svg.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("class", "circle")
.attr("cx", function(d) {return x (d.letter);})
.attr("cy", function(d) {return y (d.frequency);})
.attr("r", 4)
.attr("width", x.bandwidth())
.attr("height", function(d) {return height - y (d.frequency);})
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
svg.append("text")
.attr("x", (width / 2))
.attr("y", 0 + (margin.top / 2))
.attr("text-anchor", "middle")
.text("Relative Frequence of Letters in the English Alphabet") ;
}); .bar {
fill:rgba(55,125,34,255);
}
.bar:hover {
fill: rgba(55,125,34,255);
}
.axis--x path {
display: none;
}
.line {
fill: none;
stroke: rgba(55,125,34,255);
stroke-width: 3px;
}
.circle {
fill: rgba(55,125,34,255);
}
.d3-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
font-family: 'Courier New', Courier, monospace;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
content: "\25BC";
position: absolute;
text-align: center;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<link rel="stylesheet" href="css/mystyle.css">
</head>
<body>
<svg class="chart"></svg>
<script type="text/javascript"src="js/d3/d3.js"></script>
<script src="https://d3js.org/d3.v6.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/bumbeishvili/d3-tip-for-v6@4/d3-tip.min.js"></script>
<script type="text/javascript"src="js/myscript1.js"></script>
</body>
</html>【问题讨论】：
标签： javascript html css d3.js