Question

我正在研究第一组D3 tutorials，但有一个问题，其中显示了SVG的区域，但没有显示<rect>的任何属性！

这些是javascript，css和html源！！

var svgWidth =500;
var svgHeight = 300;

var svg = d3.select('svg')
.attr("width", svgWidth)
.attr("height", svgHeight)
.attr("class","bar-chart");

var dataset = [80,100,56,120,130,44,55,120,160];
var barPadding = 5;
var barWidth = (svgWidth/dataset.length);

var barChart = svg.selectAll("rect")
	.data(dataset)
	.enter()
	.append("rect")
	.attr("y",function(d){
		return svgHeight - d;
	})
	.attr("width", barWidth - barPadding)
	.attr("transform", function(d,i){
		var translate = [barWidth * i, 0];
		return "translate("+translate+")";
	});

.bar-chart{
	background-color: #c7d9d9;
}

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
	<svg></svg>
</body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="./js/index.js"></script>
</html>

我怎么了？

Answer 1

您未指定身高-

.attr("height", function(d) {
        return d;
})

var svgWidth =500;
var svgHeight = 300;

var svg = d3.select('svg')
.attr("width", svgWidth)
.attr("height", svgHeight)
.attr("class","bar-chart");

var dataset = [80, 100, 56, 120, 180, 30, 40, 120, 160];
var barPadding = 5;
var barWidth = (svgWidth/dataset.length);

var barChart = svg.selectAll("rect")
	.data(dataset)
	.enter()
	.append("rect")
	.attr("y",function(d){
		return svgHeight - d;
    })
    .attr("height", function(d) {
        return d;
    })
	.attr("width", barWidth - barPadding)
	.attr("transform", function(d,i){
		var translate = [barWidth * i, 0];
		return "translate("+translate+")";
	});

.bar-chart{
	background-color: #c7d9d9;
}

<svg></svg>
<script src="https://d3js.org/d3.v5.min.js"></script>

Answer 2

需要扩展条形图的“ y轴”。 让我们看一下下面的代码（也请参见提供的链接）

var data = [80,100,56,120,130,44,55,120,160];

var width = 500,
    barHeight = 20,
    margin = 1;

var scale = d3.scale.linear().domain([10,1000]).range([50,500]);

var svg = d3.select("body")
              .append("svg")
              .attr("width", width)
              .attr("height", barHeight * data.length);

var g = svg.selectAll("g")
              .data(data)
              .enter()
              .append("g")
              .attr("transform", function (d, i) {
                  return "translate(0," + i * barHeight + ")";
              });

g.append("rect")
   .attr("width", function (d) {
       return scale(d);
   })
   .attr("height", barHeight - margin)

g.append("text")
   .attr("x", function (d) { return (scale(d)); })
   .attr("y", barHeight / 2)
   .attr("dy", ".35em")
   .text(function (d) { return d; });

https://www.tutorialsteacher.com/d3js/scales-in-d3

条形图未显示

2 个答案: