简单的折线图连接直方图的顶部

Question

在以下示例中，我将直方图映射到字母与频率之间。 现在，我希望折线图也用于相同的数据，而无需进行太多更改。 这意味着只有一条红线连接直方图的顶部。 有人可以帮我吗？

<html>

<head> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script> 

</head>

<body> 

<svg width="960" height="500"></svg>

<script>

//Our basic data 
var data = [
    {frequency:0.08, letter:"A"},
    {frequency:0.11,letter:"B"},
    {frequency:0.13,letter:"C"}
];

var svg = d3.select("svg");
var margin = {top: 40, bottom: 40, left: 40, right: 40};
var width = svg.attr("width") - margin.left - margin.right;
var height = svg.attr("height") - margin.top - margin.bottom;

var x = d3.scaleBand().rangeRound([0, width]).padding(0.6);
var y = d3.scaleLinear().rangeRound([height, 0]);

//defining our main g in svg 
var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

//Looping for data bars 
data.forEach(function(){

    x.domain(data.map(function(d) { return d.letter; }));
    y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

    g
        .append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x));

    g
        .append("g")
        .call(d3.axisLeft(y).ticks(10, "%"));

    g
        .selectAll(".bar")
        .data(data)
        .enter()
        .append("rect")
        .attr("x", function(d) { return x(d.letter); })
        .attr("y", function(d) { return y(d.frequency); })
        .attr("width", x.bandwidth())
        .attr("height", function(d) { return height - y(d.frequency); });

});

</script> 

</body> 

</html> 

直方图：

Answer 1

首先，删除该数据data.forEach ：为什么要对所有内容绘制3次？

之后，定义您的行生成器：

var line = d3.line()
    .x(function(d){ return x(d.letter) + x.bandwidth()/2})
    .y(function(d){ return y(d.frequency)})
    .curve(d3.curveCardinal);;

在这里， x.bandwidth()/2将把该行放在每个小节的顶部中间。 我正在使用d3.curveCardinal ，但是曲线还有其他选择 。

然后，添加以下行：

g.append("path")
    .datum(data)
    .attr("d", line);

这是演示：

 <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script> </head> <body> <svg width="960" height="500"></svg> <script> //Our basic data var data = [ {frequency:0.08, letter:"A"}, {frequency:0.11,letter:"B"}, {frequency:0.13,letter:"C"} ]; var svg = d3.select("svg"); var margin = {top: 40, bottom: 40, left: 40, right: 40}; var width = svg.attr("width") - margin.left - margin.right; var height = svg.attr("height") - margin.top - margin.bottom; var x = d3.scaleBand().rangeRound([0, width]).padding(0.6); var y = d3.scaleLinear().rangeRound([height, 0]); //defining our main g in svg var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); //Looping for data bars x.domain(data.map(function(d) { return d.letter; })); y.domain([0, d3.max(data, function(d) { return d.frequency; })]); var line = d3.line() .x(function(d){ return x(d.letter) + x.bandwidth()/2}) .y(function(d){ return y(d.frequency)}) .curve(d3.curveCardinal); g .append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)); g .append("g") .call(d3.axisLeft(y).ticks(10, "%")); g .selectAll(".bar") .data(data) .enter() .append("rect") .attr("x", function(d) { return x(d.letter); }) .attr("y", function(d) { return y(d.frequency); }) .attr("width", x.bandwidth()) .attr("height", function(d) { return height - y(d.frequency); }); g.append("path") .datum(data) .attr("d", line) .attr("stroke", "red") .attr("fill", "none"); </script>