Question

我正在绘制折线图，但无法弄清楚x轴的比例我正在使用序数比例，因为我在x轴上显示类别这里是缩放的代码。请让我知道我在这里做错了什么。

var xScale = d3.scale.ordinal()
       .domain(xExtents)
       .range([padding, w - padding * 2]);

这里是示例代码，抱歉将所有javascript和HTML放在一个地方。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
		<style type="text/css">
			
			.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}
			
			.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}

			.y1 {
				fill: white;
				stroke: orange;
				stroke-width: 1.5px;
			}

			.y2 {
				fill: white;
				stroke: red;
				stroke-width: 1.5px;
			}

			.y3 {
				fill: white;
				stroke: steelblue;
				stroke-width: 1.5px;
			}

			.line {
			  fill: none;
			  stroke-width: 1.5px;
			}

			div.tooltip {
	            position: absolute;
	            text-align: center;
	            width: 50px;
	            height: 10px;
	            padding: 5px;
	            font: 10px sans-serif;
	            background: whiteSmoke;
	            border: solid 1px #aaa;
	            pointer-events: none;
	            box-shadow: 2px 2px 1px #888;
            }

            .legend {
	            padding: 5px;
	            font: 10px sans-serif;
	            background: yellow;
	            box-shadow: 2px 2px 1px #888;
            }

            .title {
            	font: 13px sans-serif;
            }

		</style>
	</head>
	<body>
		<script type="text/javascript">

    //Width and height
    var w = 500;
    var h = 300;
    var padding = 50;
      
          
    var dataset = [
        [ 
            {x: "USA", y: 0}, 
            {x: "UK", y: 0}, 
            {x: "BRAZIL", y: 2}, 
            {x: "KORIA", y: 0}, 
            {x: "JAPAN", y: 0}, 
            {x: "CHINA", y: 0}
        ],
        [
             {x: "USA", y: 3}, 
            {x: "UK", y: 4}, 
            {x: "BRAZIL", y: 1}, 
            {x: "KORIA", y: 3}, 
            {x: "JAPAN", y: 1}, 
            {x: "CHINA", y: 2}
        ],
        [
             {x: "USA", y: 2}, 
            {x: "UK", y: 0}, 
            {x: "BRAZIL", y: 2}, 
            {x: "KORIA", y: 3}, 
            {x: "JAPAN", y: 4}, 
            {x: "CHINA", y: 1}
        ]
    ];

    var color_hash = {  0 : ["apple", "green"],
					    1 : ["mango", "orange"],
					    2 : ["cherry", "red"]
					  }                      
    
    // Define axis ranges & scales        
    var yExtents = d3.extent(d3.merge(dataset), function (d) { return d.y; });
    var xExtents = d3.extent(d3.merge(dataset), function (d) { return d.x; });
         
	var xScale = d3.scale.ordinal()
	       .domain(xExtents)
	       .range([padding, w - padding * 2]);

	var yScale = d3.scale.linear()
	       .domain([0, yExtents[1]])
	       .range([h - padding, padding]);


	// Create SVG element
	var svg = d3.select("body")
	    .append("svg")
	    .attr("width", w)
	    .attr("height", h);


	// Define lines
	var line = d3.svg.line()
	       .x(function(d) { return x(d.x); })
	       .y(function(d) { return y(d.y1, d.y2, d.y3); });

	var pathContainers = svg.selectAll('g.line')
	.data(dataset);

	pathContainers.enter().append('g')
	.attr('class', 'line')
	.attr("style", function(d) {
		return "stroke: " + color_hash[dataset.indexOf(d)][1]; 
	});

	pathContainers.selectAll('path')
	.data(function (d) { return [d]; }) // continues the data from the pathContainer
	.enter().append('path')
	  .attr('d', d3.svg.line()
	    .x(function (d) { return xScale(d.x); })
	    .y(function (d) { return yScale(d.y); })
	  );

	// add circles
	pathContainers.selectAll('circle')
	.data(function (d) { return d; })
	.enter().append('circle')
	.attr('cx', function (d) { return xScale(d.x); })
	.attr('cy', function (d) { return yScale(d.y); })
	.attr('r', 3); 
	  
   	//Define X axis
	var xAxis = d3.svg.axis()
	        .scale(xScale)
	        .orient("bottom")
	        .ticks(5);

	//Define Y axis
	var yAxis = d3.svg.axis()
	        .scale(yScale)
	        .orient("left")
	        .ticks(5);

	//Add X axis
	svg.append("g")
	.attr("class", "axis")
	.attr("transform", "translate(0," + (h - padding) + ")")
	.call(xAxis);

	//Add Y axis
	svg.append("g")
	.attr("class", "axis")
	.attr("transform", "translate(" + padding + ",0)")
	.call(yAxis);

	// Add title	  
	svg.append("svg:text")
		   .attr("class", "title")
	   .attr("x", 20)
	   .attr("y", 20)
	   .text("Fruit Sold Per Hour");


	// add legend   
	var legend = svg.append("g")
	  .attr("class", "legend")
	  .attr("x", w - 65)
	  .attr("y", 25)
	  .attr("height", 100)
	  .attr("width", 100);

	legend.selectAll('g').data(dataset)
      .enter()
      .append('g')
      .each(function(d, i) {
        var g = d3.select(this);
        g.append("rect")
          .attr("x", w - 65)
          .attr("y", i*25)
          .attr("width", 10)
          .attr("height", 10)
          .style("fill", color_hash[String(i)][1]);
        
        g.append("text")
          .attr("x", w - 50)
          .attr("y", i * 25 + 8)
          .attr("height",30)
          .attr("width",100)
          .style("fill", color_hash[String(i)][1])
          .text(color_hash[String(i)][0]);

      });
		</script>
	</body>
</html>

Answer 1

如果要在x轴上显示不同的类别（在您的情况下，有五个国家/地区具有相应的数据），x比例设置应使用rangeBands或rangeRoundBands作为序数数据。（请参阅官方api文档中的ordinal.rangeBands和ordinal.rangeRoundBands）。

var xScale = d3.scale.ordinal()
   .domain(xExtents)
   .rangeRoundBands([padding, w - padding * 2], 0.1);

range通常与线性数据类型一起使用。希望这会有所帮助。

Answer 2

第一个问题：

使用此https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

而不是http://mbostock.github.com/d3/d3.js

第二个问题：

d3.extent(d3.merge(dataset), function (d) { return d.x; }

将返回["BRAZIL", "USA"]

您需要所有独特的国家/地区。

var countries = d3.merge(dataset).map(function(d){return d.x});
countries = d3.set(countries).values();//unique countries


var xScale = d3.scale.ordinal()
       .domain(countries)
       .rangeBands([padding, w - padding * 2], 1);

这将返回["USA", "UK", "BRAZIL", "KORIA", "JAPAN", "CHINA"]

上一个问题：

var xScale = d3.scale.ordinal()
       .domain(countries)
       .rangeBands([padding, w - padding * 2], 1);//with ordinals we give range bands

工作代码here

希望这有帮助！

d3.js：序数比例

2 个答案: