Question

我一直试图让路径元素在图表上的2个点之间绘制一条线，但无法。我使用json来获取数据，但除了数字和日期之外，它没有在图表上添加任何内容。我在这里缺少什么？

我还尝试在我的日期/费率数组中使用人工数字来查看它是否会绘制某些东西，但它还没有。我只是不确定如何使用json数据在图表上绘制线条或点。

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.0/d3.min.js"></script>
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
	<!-- <script src="charting.js"> </script> -->
	<script src="https://d3js.org/d3.v4.min.js"> </script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>

	<div class="mypanel"></div>

<script>

function showChart()
{
	d3.json("http://api.fixer.io/2017-01-03", function (jsonData) {

        var width = 800;
        var heigth = 500;

        var margin = 100;

		var chartWidth = width - margin*2;
		var chartHeigth = heigth - margin*2;

		var rates = ['1', '2000'];
		var dates = ['2017-01-03', '2017-02-03'];

		var yScale = d3.scaleLinear()
			.domain([d3.min(rates), d3.max(rates)])
			.range([chartHeigth, 0]);

		var xScale = d3.scaleBand()
			.domain(dates)
			.range([0, chartWidth]);

        var yAxis = d3.axisLeft(yScale);
		var xAxis = d3.axisBottom(xScale);

        var canvas = d3.select("body")
			.append("svg")
			.attr("width", width)
			.attr("height", heigth);

        var chartGroup = canvas.append("g")
			.attr("transform", "translate(" + margin + ", " + margin + ")");

        var line = d3.line()
			.x(function (d) { return xScale(d.date) })
			.y(function (d) { return yScale(d.rate) });

        chartGroup.append("path")
			.attr("d", line(jsonData))
			.attr("fill", "none")
			.attr("stroke", "red")
			.attr("stroke-width", "3px")
			.attr("transform", "translate(" + (100) / 2  + ", 0)");

        chartGroup.append("g")
			.call(yAxis);

        chartGroup.append("g")
			.attr("transform", "translate(0, "+chartHeigth+")")
			.call(xAxis);		
	});
}







  //       for (var property in jsonData.rates) {
  // 		  if (jsonData.rates.hasOwnProperty(property)) {
  // 		  	rates.push(jsonData.rates[property]);
  // 		  	 		   }
		// }

</script>







	<script> showChart(); </script>

</body>
</html>

＆＃13;

Answer 1

首先有两个问题。 JSON请求不是https，因此被拒绝。修复后，api.fixer.io中的CORS头文件不允许跨域使用。（我不确定是什么所有正在发生什么，但这是一个开始。）

无法让JS图表工作/绘图

1 个答案: