Javascript 如何在d3中从v4转换为v3
我有这个散点图,它不适用于D3V3。我没有在控制台中得到任何错误,但它没有显示它应该显示的轴 以下是js文件:Javascript 如何在d3中从v4转换为v3,javascript,d3.js,Javascript,D3.js,我有这个散点图,它不适用于D3V3。我没有在控制台中得到任何错误,但它没有显示它应该显示的轴 以下是js文件: var data = [ { "xaxis": 0.2, "yaxis": 0.8, "color": 0 }, { "xaxis": 0.3, "yaxis": 0.7, "color": 1 }, ] // set the dimensions and margins of
var data = [
{
"xaxis": 0.2,
"yaxis": 0.8,
"color": 0
},
{
"xaxis": 0.3,
"yaxis": 0.7,
"color": 1
},
]
// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 30, left: 60},
width = 460 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
//Read the data
function draw(data) {
// Add X axis
var x = d3.scale.linear()
.domain([0, 1])
.range([ 0, width ]);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.svg.axis(y));
// text label for the x axis
svg.append("text")
.attr("transform",
"translate(" + (width/2) + " ," +
(height + margin.top + 20) + ")")
.style("text-anchor", "middle")
.text("Date");
// Add Y axis
var y = d3.scale.linear()
.domain([0, 1])
.range([ height, 0]);
svg.append("g")
.call(d3.svg.axis(y));
// text label for the y axis
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left)
.attr("x",0 - (height / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.text("Value");
// Color scale: give me a specie name, I return a color
var color = d3.scale.ordinal()
.domain(["0", "1", "2" ])
.range([ "#440154ff", "#21908dff", "#fde725ff"])
// Add dots
svg.append('g')
.selectAll("dot")
.data(data)
.enter()
.append("circle")
.attr("cx", function (d) { return x(d.xaxis); } )
.attr("cy", function (d) { return y(d.yaxis); } )
.attr("r", 5)
.style("fill", function (d) { return color(d.color) } )
}
draw(data);
以及html:
<!DOCTYPE html>
<meta charset="utf-8">
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v3.js"></script>
<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>
我已经将v4中的散点图改编为v3,但似乎缺少了什么,我无法找到它。任何帮助都将不胜感激。这是我少数几次看到有人问关于降级的问题。你为什么这么做还不清楚。然而,问题很明显,在D3 v3中,您没有像以前那样将标尺传递给轴生成器:
d3.svg.axis(y)
它必须是:
d3.svg.axis()
.scale(y)//pass the scale here
.orient("left")//or "right", depending on what position you want
非常感谢。我使用v3进行其他可视化,因此我需要降级:(