Question

我想使用json文件中的数据值并在d3.js中使用它。我想通过使用x轴上0到100％的条形图在json文件中显示数据，并将其转换为百分比并绘制图形。我不知道如何将数据值更改为百分比。因此代码中不再有任何进展。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>D3_percent_Bar</title>
	<script src="http://d3js.org/d3.v4.js"></script>
	<script src="//code.jquery.com/jquery.min.js"></script>

</head>
<body>

<svg id="bar1" width="250" height="250"></svg>

<script>

var margin={top:10,bottom:10,left:15,right:15},
	w = 250 - margin.left - margin.right,
	h = 250 - margin.top - margin.bottom;

var canvas = d3.select("#bar1")
		.append("svg")
		.attr("width",w+margin.left+margin.right)
		.attr("height",h+margin.top+margin.bottom);


var formatter = d3.format(".0%");

var x = d3.scaleLinear()
	.range([0,w]);

var xAxis = d3.axisBottom()
	.scale(x)
	.ticks(10,formatter);


	
var data = d3.json("data_F.json", function (error,data){

	alert(data);
	alert(error);

	var max = Math.max.apply(Math, data);
	var percents = (data / max)*100;
	
	
	//var maxX = d3.max(data, function(d){return d.num2;});
	//var minX = d3.min(data, function(d){return d.num1;});
	
	//x.domain([0,maxX]);
	
	canvas.append("g")
	.attr("class","axis")
	.attr("transform", "translate("+margin.left+","+50+")")
	.call(xAxis);
	
	
	
	var bar = canvas.selectAll("rect")
			.data(data)
			.attr("class","bar")
			.enter()
			.append("rect")
			.attr("x",margin.left+40)
			.attr("width", function(d){return d.num1;})
			.attr("y",function(d,i){return i*50;})
			.attr("height",40);
			//.attr("height",barHeight-1)
	
	//.attr("transform","translate(0,4)");
	
	
	});

</script>
</body>

</html>

Answer 1

您不需要＆＃34;将数据值更改为百分比＆＃34; 。您只需更改刻度线格式：

.tickFormat(d => Math.round(d*100/d3.max(data)) + "%");

查看以下演示。这是一个常规的条形图：

＆＃13;

var data = [20,45,245,134,267,111,54,333,23];

var w = 500, h = 200, padding = 20;
var svg = d3.select("body").append("svg")
	.attr("width", w)
	.attr("height", h);
	
var xScale = d3.scaleLinear()
	.range([padding, (w - padding)])
	.domain([0, d3.max(data)]);
	
var rects = svg.selectAll(".rects")
	.data(data)
	.enter()
	.append("rect")
	.attr("x", xScale(0))
	.attr("y", (d,i) => i*20)
	.attr("height", 14)
	.attr("width", d => xScale(d) - padding)
	.attr("fill", "teal");
	
var xAxis = d3.axisBottom(xScale);

var gX = svg.append("g")
	.attr("transform", "translate(0," + (h - padding) + ")")
	.call(xAxis);

＆＃13;

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

＆＃13;

此处没有新内容，刻度显示绝对值，最大值为333.

但这里是相同的代码，不更改任何数据，只更改tickFormat：

＆＃13;

var data = [20,45,245,134,267,111,54,333,23];

var w = 500, h = 200, padding = 20;
var svg = d3.select("body").append("svg")
	.attr("width", w)
	.attr("height", h);
	
var xScale = d3.scaleLinear()
	.range([padding, (w - padding)])
	.domain([0, d3.max(data)]);
	
var rects = svg.selectAll(".rects")
	.data(data)
	.enter()
	.append("rect")
	.attr("x", xScale(0))
	.attr("y", (d,i) => i*20)
	.attr("height", 14)
	.attr("width", d => xScale(d) - padding)
	.attr("fill", "teal");
	
var xAxis = d3.axisBottom(xScale)
	.tickFormat(d => Math.round(d*100/d3.max(data)) + "%");

var gX = svg.append("g")
	.attr("transform", "translate(0," + (h - padding) + ")")
	.call(xAxis);

＆＃13;

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

＆＃13;

d3.js我想将数据值更改为百分比

1 个答案: