Question

我试图创建与 -

大致相同的东西

目前我的代码产生了类似的东西 -

虽然粗糙而简单，但却有其目的，可以在以后整理。我正在绘制数据的问题。我已经看过使用d3.svg.line（）的多个例子，但似乎都使用了一个数据集。

负责轴的代码＆＃39;是 -

＆＃13;

<html>
	<head>
		<title>D3 Axis Example</title>
		<script src="http://d3js.org/d3.v3.js"></script>
		
		<style type="text/css">
			
        

		</style>		
    </head>
    
    <body>
    
    <script>
        var margin = {top: 100, right: 100, bottom: 100, left: 100},
            width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;

        var conditions = ['condition 1', 'condition 2', 'condition 3', 'condition 4', 'condition 6','condition 7', 'condition 8', 'condition 9', 'condition 10']

        var frequency = [3000, 21, 70, 10, 20, 19, 18, 34, 2]


        var x = d3.scale.ordinal()
            .domain(conditions)
            .rangePoints([0, width]);

        var y = d3.scale.linear().domain([0, d3.max(frequency)]).range([height, 0]);

        var xAxis = d3.svg.axis()
            .scale(x)
            .orient("bottom");

        var yAxisLeft = d3.svg.axis()
            .scale(y)
            .ticks(4)
            .orient("left");


        // creating the line
        var line = d3.svg.line()
            .x(function(d,i) { 
                return x(i); 
            })
            .y(function(d) { 
                return y(d); 
            })

        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 + "," + (height + 25) +")");

        svg.append("g")
            .attr("class", "xaxis")
            .call(xAxis);

        svg.append("g")
              .attr("class", "y axis")
              .attr("transform", "translate(0,-300)")
              .call(yAxisLeft);

        svg.selectAll(".xaxis text")  // select all the text elements for the xaxis
            .attr("transform", function(d) {
                    return "translate(" + this.getBBox().height*-2 + "," + this.getBBox().height + ")rotate(-45)";
         })
            
            .attr('y', '50')
            .attr('x', '-50')
        
        svg.append("path").attr("d", line(frequency));
    </script>
    
    </body>
</html>

＆＃13;

有没有一种方法可以使用两个数据集绘制一条线，或者可以将它们组合成一个可用的数据集并以这种方式进行？

Answer 1

行生成器内的匿名函数中的第一个参数（d）是引用传递给该函数的数据数组的数据。但是，第二个参数（i）只是索引，无论您使用哪个数组，它当然都是相同的。

因此，解决方案是使用这些索引来获取第二个数组的值：

var line = d3.svg.line()
    .x(function(d, i) {
        return x(conditions[i]);
    //data array------^
    })
    .y(function(d) {
        return y(d);
    })

请注意，为了实现这一点，您必须确定两个数组中元素的顺序。

这是您更新的代码：

 var margin = {
     top: 20,
     right: 20,
     bottom: 100,
     left: 40
   },
   width = 800 - margin.left - margin.right,
   height = 500 - margin.top - margin.bottom;

 var conditions = ['condition 1', 'condition 2', 'condition 3', 'condition 4', 'condition 6', 'condition 7', 'condition 8', 'condition 9', 'condition 10']

 var frequency = [3000, 21, 70, 10, 20, 19, 18, 34, 2]

 var x = d3.scale.ordinal()
   .domain(conditions)
   .rangePoints([margin.left, width]);

 var y = d3.scale.linear().domain([0, d3.max(frequency)]).range([height, 0]);

 var xAxis = d3.svg.axis()
   .scale(x)
   .orient("bottom");

 var yAxisLeft = d3.svg.axis()
   .scale(y)
   .ticks(4)
   .orient("left");

 // creating the line
 var line = d3.svg.line()
   .x(function(d, i) {
     return x(conditions[i]);
   })
   .y(function(d) {
     return y(d);
   })

 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.append("g")
   .attr("class", "xaxis")
   .attr("transform", "translate(0,"+ (height) + ")")
   .call(xAxis);

 svg.append("g")
   .attr("class", "yaxis")
   .attr("transform", "translate(" + margin.left + ",0)")
   .call(yAxisLeft);

 svg.selectAll(".xaxis text") // select all the text elements for the xaxis
   .attr("transform", function(d) {
     return "translate(" + this.getBBox().height * -2 + "," + this.getBBox().height + ")rotate(-45)";
   })
   .attr('y', '10')
   .attr('x', '-10')

 svg.append("path").attr("d", line(frequency))
   .attr("fill", "none")
   .attr("stroke", "orange");

.xaxis line,
.xaxis path,
.yaxis line,
.yaxis path {
  fill: none;
  stroke: black;
}

<script src="https://d3js.org/d3.v3.js"></script>

PS：我改变了边距，轴和刻度。

使用2个数据集将数据绘制到折线图

1 个答案: