Question

如果这是重复的帖子，我道歉。我保证会搜索类似内容，但是已经很晚了，我很累。此外，这似乎是一个完整的NOOB问题。

所以我正在使用D3中的水平条形图，我将SVG附加到我的#wrapper，然后我使用包含.append('g')的新变量进行跟进。很标准。但我的.select方法返回null并且控制台抛出

＆＃34;未捕获的TypeError：无法读取属性＆＃39;追加＆＃39; of null＆＃34;。

什么了？如何让我的svg元素填充g元素？

    var canvas = d3.select('#wrapper')
        .append('svg')
        .attr({'width':900,'height':550});

    var grids = canvas.append('g') 
        .attr('id','grid')
        .attr('transform','translate(150,10)')
        .selectAll('line')
        .data(grid)
        .enter()
        .append('line')
        .attr({'x1':function(d,i){return i*30;},
            'y1': function(d){return d.y1;},
            'x2': function(d,i){return i*30;},
            'y2': function(d){return d.y2;},
            })
        .style({'stroke':'#adadad','stroke-width':'1px'});

JS Fiddle在这里：https://jsfiddle.net/ntos9hwz/

Answer 1

在您的代码中发现了多个错误。

var transittext = d3.select("#bars")。你的html中没有#bars id的元素。您应该获取元素并将其提供给select()函数。即
```
var elem = document.getElementById("#wrapper")
var trasittext = d3.select()
```
d3上没有名为scaleLinear()的函数。这是scale.linear()
d3上没有名为scaleQuantize()的功能。这是scale.quantize()
并在第45行写了.tickVals(tickVals);。它是.tickValues(tickVals);

完成所有更改后，这是您的工作代码

	var categories = [" ",'Accessories', 'Audiophile', 'Camera & Photo', 'Cell Phones', 'Computers','eBook Readers','Gadgets','GPS & Navigation','Home Audio','Office Electronics','Portable Audio','Portable Video','Security & Surveillance','Service','Television & Video','Car & Vehicle'];
		var dollars = [213,209,190,179,156,209,190,179,213,209,190,179,156,209,190,190];
		var colors = ['#0000b4','#0082ca','#0094ff','#0d4bcf','#0066AE','#074285','#00187B','#285964','#405F83','#416545','#4D7069','#6E9985','#7EBC89','#0283AF','#79BCBF','#99C19E'];
		
		var grid = d3.range(25).map(function(i){
			return {'x1':0, 'y1':0,'x2':0,'y2':0};
		});
	
		var tickVals = grid.map(function(d,i){
			if(i>0){return i*10;}
			else if (i===0){return "100";}
		});

		var xscale = d3.scale.linear()
			.domain([10,250])
			.range([0,722])
		var yscale = d3.scale.linear()
			.domain([0, categories.length])
			.range([0,7450]);
		var colorScale = d3.scale.quantize()
			.domain([0, categories.length])
			.range(colors);
		var canvas = d3.select('#wrapper')
			.append('svg')
			.attr({'width':900,'height':550});

		var grids = canvas.append('g') 
			.attr('id','grid')
			.attr('transform','translate(150,10)')
			.selectAll('line')
			.data(grid)
			.enter()
			.append('line')
			.attr({'x1':function(d,i){return i*30;},
				'y1': function(d){return d.y1;},
				'x2': function(d,i){return i*30;},
				'y2': function(d){return d.y2;},
				})
			.style({'stroke':'#adadad','stroke-width':'1px'});

		var xAxis = d3.svg.axis();	
			xAxis
			.orient('bottom')
			.scale(xscale)
			.tickValues(tickVals);
		var yAxis = d3.svg.axis();
			yAxis
			.orient('left')
			.scale(yscale)
			.tickSize(2)
			.tickFormat(function(d,i){return categories[i];})
			.tickValues(d3.range(17));
		var y_xis = canvas.append('g')
			.attr("transform","translate(150,0)")	
			.attr('id','yaxis')
			.call(yAxis);
		var x_xis = canvas.append('g')
			.attr("transform","translate(150,480)")
			.attr('id','xaxis')
			.call(xAxis);

		var chart = canvas.append('g')
			.attr("transform","translate(150,0)")
			.attr('id','bars')
			.selectAll('rect')
			.data(dollars)
			.enter()
			.append('rect')
			.attr('height',19)
			.attr({'x':0,'y':function(d,i){return yscale(i)+19; }})
			.style('fill',function(d,i){return colorScale(i); })
			.attr('width',function(d){return 0; });

		var elemxyz = document.getElementById("wrappet");
		var transittext = d3.select(elemxyz)
			.selectAll('text')
			.data(dollars)
			.enter()
			.append('text')
			.attr({'x':function(d) {return xscale(d)-200;}, 'y': function(d,i){return yscale(i)+35; }})
			.text(function(d){return d+"$"; }).style({'fill':'#fff','font-size':'14px'});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.0/d3.min.js"></script>
<div id="wrapper"></div>

<强>更新

要使用d3.js版本3创建线性刻度，请使用d3.scale.linear()

并使用d3.js版本4创建线性刻度，使用d3.scaleLinear()

希望这会有所帮助。快乐编码：）

带.select方法的变量返回null - 未捕获的TypeError：无法读取属性＆＃39;追加＆＃39;为null

1 个答案: