x和y轴未显示在散点图d3.js中

Question

对于x和y轴的散点图d3.js我没有得到任何结果，数据绘图也出现在svg边界之外。提前致谢。 我面临着2个问题。 X和Y轴未显示。另外数据绘图是beyound svg border.plot在图形之外。任何人都可以帮助。预先感谢。

const svgHeight = 750,
		svgWidth = 1000,
		margin = {top: 10, right: 50, bottom: 100, left: 50},
		dim = {
  		width : svgWidth - margin.left - margin.right,
  		height : svgHeight - margin.top - margin.bottom
};

const goodRating = [];
const badRating = [];

d3.csv("data/movies.csv", function(data) {
	data.forEach(function(d) {
		d.imdbRating = +d.imdbRating;
		d.WinsNoms = +d.WinsNoms;
		d.Budget = +d.Budget;
		d.imdbVotes = +d.imdbVotes;
		if (d.IsGoodRating == "1") { goodRating.push(d); }
		else if (d.IsGoodRating == "0") { badRating.push(d); }
	})

    const crossScale = d3.scale.linear().domain(d3.extent(goodRating, d => d.WinsNoms)).range([1, 200]);
    const circleScale = d3.scale.linear().domain(d3.extent(badRating, d => d.WinsNoms)).range([1, 20]);
    const ratingScale = d3.scale.linear().domain(d3.extent(data, d => d.imdbRating)).range([0, dim.width]);
    const winsScale = d3.scale.linear().domain(d3.extent(data, d => d.WinsNoms)).range([dim.height, 0]);
    const budgetScale = d3.scale.linear().domain(d3.extent(data, d => d.Budget)).range([dim.height, 0]);
    const votesScale = d3.scale.linear().domain(d3.extent(data, d => d.imdbVotes)).range([dim.height, 0]);
    const ySqrtScale = d3.scale.sqrt().domain(d3.extent(data, d => d.WinsNoms)).range([dim.height, 0]);
    const yLogScale = d3.scale.log().base(10).domain([.1, d3.max(data, d => d.WinsNoms)]).range([dim.height, 0]);

    //need to revisit name and purpose of usage
    const winsLinScale = d3.scale.linear().domain(d3.extent(data, d => d.WinsNoms)).range([.1, d3.max(data, d => d.WinsNoms)]);

    //create svg elements
    const svg1 = d3.select("body")
    				.append("svg")
    				.attr("width", svgWidth)
    				.attr("height", svgHeight);

    const svg2 = d3.select("body")
    				.append("svg")
    				.attr("width", svgWidth)
    				.attr("height", svgHeight);

    const svg3 = d3.select("body")
    				.append("svg")
    				.attr("width", svgWidth)
    				.attr("height", svgHeight);

    const svg4 = d3.select("body")
    				.append("svg")
    				.attr("width", svgWidth)
    				.attr("height", svgHeight);

    const svg5 = d3.select("body")
    				.append("svg")
    				.attr("width", svgWidth)
    				.attr("height", svgHeight);

    //define x and y axes and label axes/graph
    d3.select('svg1')
      .append('g1')
            .attr('class','axis')
            .attr('transform', 'translate(50, 515)')
            .call(d3.svg.axis().scale(ratingScale).orient('bottom'));
    svg1.append("text")             
    	    .attr("transform", "translate(" + (dim.width / 2) + " ," + (dim.height + margin.top + 20) + ")")
    	    .style("text-anchor", "middle")
    	    .text("IMDb Rating"); 
    d3.select('svg1')
      .append('g1')
            .attr('class', 'axis')
            .attr("transform", "translate(50, 25)")
            .call(d3.svg.axis().scale(winsScale).orient('left'));
    svg1.append("text")
    	    .attr("transform", "rotate(-90)")
    	    .attr("y", margin.left)
    	    .attr("x",0 - (dim.height / 2))
    	    .style("text-anchor", "middle")
    	    .text("Wins+Noms"); 
    svg1.append("text")
    		.attr('y', 25)
    		.attr("x", (dim.width / 2) + 25)             
            .attr("text-anchor", "middle")  
            .style("font-size", "16px") 
    	    .text('Wins+Nominations vs. IMDb Rating');

    d3.select('svg2')
    	.append('g2')
    	    .attr('class','axis')
    	    .attr("transform", 'translate(50, 515)')
    	    .call(d3.svg.axis().scale(ratingScale).orient('bottom'));
    svg2.append("text")             
    	 	.attr("transform", "translate(" + (dim.width / 2) + " ," + (dim.height + margin.top + 20) + ")")
    	 	.style("text-anchor", "middle")
    	 	.text("IMDb Rating"); 
    d3.select('svg2')
    	.append('g2')
            .attr('class', 'axis')
            .attr("transform", "translate(50, 25)")
    	    .call(d3.svg.axis().scale(budgetScale).orient('left'));
    svg2.append("text")
    	    .attr("transform", "rotate(-90)")
    	    .attr("y", margin.left)
    	    .attr("x",0 - (dim.height / 2))
    	    .style("text-anchor", "middle")
    	    .text("Budget");
    svg2.append("text")
    	    .attr('y', 25)
    	    .attr("x", (dim.width / 2) + 25)             
    	    .attr("text-anchor", "middle")  
    		.style("font-size", "16px") 
    	    .text('Budget vs. IMDb Rating');

    d3.select('svg3')
      .append('g3')
            .attr('class','axis')
            .attr("transform", 'translate(50, 515)')
            .call(d3.svg.axis().scale(ratingScale).orient('bottom'));
    svg3.append("text")             
    		.attr("transform", "translate(" + (dim.width / 2) + " ," + (dim.height + margin.top + 20) + ")")
    	 	.style("text-anchor", "middle")
    	 	.text("IMDb Rating"); 
    d3.select('svg3')
      .append('g3')
            .attr('class', 'axis')
            .attr("transform", "translate(50, 25)")
    	    .call(d3.svg.axis().scale(votesScale).orient('left'));
    svg3.append("text")
        	.attr("transform", "rotate(-90)")
        	.attr("y", margin.left)
        	.attr("x",0 - (dim.height / 2))
        	.style("text-anchor", "middle")
        	.text("IMDb Votes");   
    svg3.append("text")
            .attr('y', 25)
            .attr("x", (dim.width / 2) + 25)             
            .attr("text-anchor", "middle")  
            .style("font-size", "16px") 
    	    .text('Votes vs. IMDb Rating sized by Wins+Nominations');

    d3.select('svg4')
      .append('g4')
            .attr('class','axis')
            .attr("transform", 'translate(50, 515)')
    	    .call(d3.svg.axis().scale(ratingScale).orient('bottom'));
    svg4.append("text")             
    		.attr("transform", "translate(" + (dim.width / 2) + " ," + (dim.height + margin.top + 20) + ")")
    	 	.style("text-anchor", "middle")
    	 	.text("IMDb Rating"); 
    d3.select('svg4')
      .append('g4')
            .attr('class', 'axis')
            .attr("transform", "translate(50, 25)")
    	    .call(d3.svg.axis().scale(ySqrtScale).orient('left'));
    svg4.append("text")
    	    .attr("transform", "rotate(-90)")
    	    .attr("y", margin.left)
    	    .attr("x",0 - (dim.height / 2))
    	    .style("text-anchor", "middle")
    	    .text("Wins+Noms");   
    svg4.append("text")
            .attr('y', 25)
            .attr("x", (dim.width / 2) + 25)             
            .attr("text-anchor", "middle")  
            .style("font-size", "16px") 
    	    .text('Wins+Nominations (square-root-scaled) vs. IMDb Rating');

    d3.select('svg5')
      .append('g5')
            .attr('class','axis')
            .attr("transform", 'translate(50, 515)')
    	    .call(d3.svg.axis().scale(ratingScale).orient('bottom'));
    svg5.append("text")             
    		.attr("transform", "translate(" + (dim.width / 2) + " ," + (dim.height + margin.top + 20) + ")")
    	 	.style("text-anchor", "middle")
    	 	.text("IMDb Rating");
    d3.select('svg5')
      .append('g5')
            .attr('class', 'axis')
            .attr("transform", "translate(50, 25)")
    	    .call(d3.svg.axis().scale(yLogScale).orient('left'));
    svg5.append("text")
    	    .attr("transform", "rotate(-90)")
    	    .attr("y", margin.left)
    	    .attr("x",0 - (dim.height / 2))
    	    .style("text-anchor", "middle")
    	    .text("Wins+Noms");   
    svg5.append("text")
            .attr('y', 25)
            .attr("x", (dim.width / 2) + 25)             
            .attr("text-anchor", "middle")  
            .style("font-size", "16px") 
    	    .text('Wins+Nominations (log-scaled) vs. IMDb Rating');

    //create plot symbols
    svg1.selectAll('path')
       .data(goodRating)
       .enter()
       .append('path')
    	    .attr('d',d3.svg.symbol().type('cross').size(70))
    	    .attr('transform', d => 'translate(' + ratingScale(d.imdbRating) + ',' + winsScale(d.WinsNoms) + ')')
        	.attr('stroke', 'Blue')
        	.attr('fill', 'None');
    svg1.selectAll('circle')
       .data(badRating)
       .enter()
    	    .append('circle')
    	    .attr('transform', d => 'translate(' + ratingScale(d.imdbRating) + ',' + winsScale(d.WinsNoms) + ')')
    	    .attr('stroke', 'Red')
    	    .attr('fill', 'None')
    	    .attr('r', 5);

    svg2.selectAll('path')
        .data(goodRating)
        .enter()
        .append('path')
    	    .attr('d',d3.svg.symbol().type('cross').size(75))
    		.attr("transform", d => "translate(" + ratingScale(d.imdbRating) + "," + budgetScale(d.Budget) + ")")
    	    .attr('stroke', 'Blue')
    	    .attr('fill', 'None');
    svg2.selectAll('circle')
        .data(badRating)
        .enter()
    	.append('circle')
    	    .attr("transform", d => "translate(" + ratingScale(d.imdbRating) + "," + budgetScale(d.Budget) + ")")
    	    .attr('stroke', 'Red')
    	    .attr('fill', 'None')
    	    .attr('r', 5);

    svg3.selectAll('path')
        .data(goodRating)
        .enter()
        .append('path')
    		.attr('d',d3.svg.symbol().type('cross').size(d => crossScale(d.WinsNoms)))
    		.attr("transform", d => "translate(" + ratingScale(d.imdbRating) + "," + votesScale(d.imdbVotes) + ")")
    	    .attr('stroke', 'Blue')
    	    .attr('fill', 'None');
    svg3.selectAll('circle')
        .data(badRating)
        .enter()
    	.append('circle')
	       .attr("transform", d => "translate(" + ratingScale(d.imdbRating) + "," + votesScale(d.imdbVotes) + ")")
    	   .attr('stroke', 'Red')
    	   .attr('fill', 'None')
    	   .attr('r', 5);
    		
    svg4.selectAll('path')
        .data(goodRating)
        .enter()
        .append('path')
    	    .attr('d',d3.svg.symbol().type('cross').size(75))
    		.attr("transform", d => "translate(" + ratingScale(d.imdbRating) + "," + ySqrtScale(d.WinsNoms) + ")")
    	    .attr('stroke', 'Blue')
    	    .attr('fill', 'None');
    svg4.selectAll('circle')
        .data(badRating)
        .enter()
    	.append('circle')
    	    .attr("transform", d => "translate(" + ratingScale(d.imdbRating) + "," + ySqrtScale(d.WinsNoms) + ")")
    	    .attr('stroke', 'Red')
    	    .attr('fill', 'None')
    		.attr('r', 5);
    		
    svg5.selectAll('path')
        .data(goodRating)
        .enter()
        .append('path')
    	    .attr('d',d3.svg.symbol().type('cross').size(75))
    		.attr("transform", d => "translate(" + ratingScale(d.imdbRating) + "," + yLogScale(winsLinScale(d.WinsNoms)) + ")")
    	    .attr('stroke', 'Blue')
    	    .attr('fill', 'None');
    svg5.selectAll('circle')
        .data(badRating)
        .enter()
    	.append('circle')
    	    .attr("transform", d => "translate(" + ratingScale(d.imdbRating) + "," + yLogScale(winsLinScale(d.WinsNoms)) + ")")
    	    .attr('stroke', 'Red')
    	    .attr('fill', 'None')
    	    .attr('r', 5);

    //create legend
    svg1.append('path')
    	   .attr('d',d3.svg.symbol().type('cross').size(75))
    	   .attr("transform", "translate(50,15)")
    	   .attr('fill','None')
    	   .attr('stroke','Blue');
    svg1.append('circle')
    	   .attr("transform", "translate(50,35)")	
    	   .attr('stroke','Red')
    	   .attr('fill','None')
    	   .attr('r',5);
    svg1.append("text")
            .attr("y", 20)
            .attr("x", 60)
            .attr("font-size", "20px")
            .attr("text-anchor", "start")
            .text("Good Rating");
    svg1.append("text")
            .attr("y", 45)
            .attr("x", 60)
            .attr("font-size", "20px")
            .attr("text-anchor", "start")
            .text("Bad Rating");

    svg2.append('path')
    		.attr('d',d3.svg.symbol().type('cross').size(70))
    		.attr("transform", "translate(50,15)")
    		.attr('fill','None')
    		.attr('stroke','Blue');
    svg2.append('circle')
    		.attr("transform", "translate(50,35)")
    		.attr('stroke','Red')
    		.attr('fill','None')
    		.attr('r',5);
    svg2.append("text")
            .attr("y", 20)
            .attr("x", 60)
            .attr("font-size", "20px")
            .attr("text-anchor", "start")
            .text("Good Rating");
    svg2.append("text")
            .attr("y", 45)
            .attr("x", 60)
            .attr("font-size", "20px")
            .attr("text-anchor", "start")
            .text("Bad Rating");

    svg3.append('path')
    		.attr('d',d3.svg.symbol().type('cross').size(70))
    		.attr("transform", "translate(50,15)")
    		.attr('fill','None')
    		.attr('stroke','Blue');
    svg3.append('circle')
    		.attr("transform", "translate(50,35)")
    		.attr('stroke','Red')
    		.attr('fill','None')
    		.attr('r',5);
    svg3.append("text")
            .attr("y", 20)
            .attr("x", 60)
            .attr("font-size", "20px")
            .attr("text-anchor", "start")
            .text("Good Rating");
    svg3.append("text")
            .attr("y", 45)
            .attr("x", 60)
            .attr("font-size", "20px")
            .attr("text-anchor", "start")
            .text("Bad Rating");

    svg4.append('path')
    		.attr('d',d3.svg.symbol().type('cross').size(70))
    		.attr("transform", "translate(50,15)")
    		.attr('fill','None')
    		.attr('stroke','Blue');
    svg4.append('circle')
    		.attr("transform", "translate(50,35)")
    		.attr('stroke','Red')
    		.attr('fill','None')
    		.attr('r',5);
    svg4.append("text")
            .attr("y", 20)
            .attr("x", 60)
            .attr("font-size", "20px")
            .attr("text-anchor", "start")
            .text("Good Rating");
    svg4.append("text")
            .attr("y", 45)
            .attr("x", 60)
            .attr("font-size", "20px")
            .attr("text-anchor", "start")
            .text("Bad Rating");

    svg5.append('path')
    		.attr('d',d3.svg.symbol().type('cross').size(70))
    		.attr("transform", "translate(50,15)")
    		.attr('fill','None')
    		.attr('stroke','Blue');
    svg5.append('circle')
    		.attr("transform", "translate(50,35)")
    		.attr('stroke','Red')
    		.attr('fill','None')
    		.attr('r',5);
    svg5.append("text")
            .attr("y", 20)
            .attr("x", 60)
            .attr("font-size", "20px")
            .attr("text-anchor", "start")
            .text("Good Rating");
    svg5.append("text")
            .attr("y", 45)
            .attr("x", 60)
            .attr("font-size", "20px")
            .attr("text-anchor", "start")
            .text("Bad Rating");
});

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>kbrisson3</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://d3js.org/d3.v3.min.js"></script>
		<link rel='stylesheet' href='css/style.css'>
	</head>
	<body>
		<script type='text/javascript' src='js/script.js'></script>
	</body>
</html>

CSV文件

Id,Title,Year,Runtime,Country,imdbRating,imdbVotes,Budget,Gross,WinsNoms,IsGoodRating
13,Alone in the Dark,2005,96,"Canada, Germany, USA",2.3,37613,20000000,8178569,9,0
38,Boogeyman,2005,89,"USA, New Zealand, Germany",4.1,25931,20000000,67192859,0,0
52,Constantine,2005,121,"USA, Germany",6.9,236091,75000000,221594911,11,1
62,Diary of a Mad Black Woman,2005,116,USA,5.6,10462,5500000,50458356,26,0
83,Fever Pitch,2005,104,"USA, Germany",6.2,36198,40000000,50071069,9,1
86,Forty Shades of Blue,2005,108,USA,6,1135,1500000,172569,3,1
94,Guess Who,2005,105,USA,5.9,33846,35000000,102115888,16,1

Answer 1

轴的问题是没有标签svg1和g1

d3.select('svg1')
  .append('g1')

将其更改为

svg1
  .append('g')

在其他情况下也要这样做

---

绘图外轴的问题是因为平移了轴，但相对于原点添加了圆/十字。

将平移的g添加到svg并将轴和圆添加到此g。并带有正确的翻译。