在 d3 图上设置原点

Question

我在弄乱 d3，但一条基本线似乎被颠倒了。似乎原点位于页面顶部（就像页面上的默认方向）。但是，我假设 d3 点是相对于 svg 图的。

如何将原点设置为图形的左下角？（不转换数据）

// make dataset
var dataset = [[1,1]];
for (var x = 0; x< 10000; x +=1) {
    var y = x*x;
    dataset.push([x, y])
}

// set graph dims
var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// Adds the svg canvas
var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");;



// add scale
var x = d3.scale.linear().domain([0, 200]).range([0, width]);
var y = d3.scale.linear().domain([0, 1000]).range([height, 0]);


// add x axis
var xAxis = d3.svg.axis().scale(x)
    .orient("bottom").ticks(10);

// add y axis
var yAxis = d3.svg.axis().scale(y)
    .orient("left").ticks(10);

    // Add the X Axis
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + (height - margin.top - margin.bottom) + ")")
        .call(xAxis);

    // Add the Y Axis
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);

//add dots
svg.selectAll("circle")
   .data(dataset)
   .enter()
   .append("circle")
   .attr("cx", function(d) {
        return d[0];
   })
   .attr("cy", function(d) {
        return d[1];
   })
   .attr("r", 1);

Answer 1

关于方向：与D3无关。D3 操作 DOM 元素，通常（但不总是）我们使用 D3 来操作 SVG 元素。SVG 规范说原点 (0,0) 位于左上角。

关于您的问题：您正确地将 y 比例设置为从底部到顶部，但您只是忘记使用它！使用量表：

.attr("cx", function(d) {
    return x(d[0]);
})
.attr("cy", function(d) {
    return y(d[1]);
})

这是演示：

.attr("cx", function(d) {
    return x(d[0]);
})
.attr("cy", function(d) {
    return y(d[1]);
})

// make dataset
var dataset = [[1,1]];
for (var x = 0; x< 100; x +=1) {
    var y = x*x;
    dataset.push([x, y])
}

// set graph dims
var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// Adds the svg canvas
var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");;



// add scale
var x = d3.scale.linear().domain([0, 200]).range([0, width]);
var y = d3.scale.linear().domain([0, 1000]).range([height - margin.bottom - margin.top, 0]);


// add x axis
var xAxis = d3.svg.axis().scale(x)
    .orient("bottom").ticks(10);

// add y axis
var yAxis = d3.svg.axis().scale(y)
    .orient("left").ticks(10);

    // Add the X Axis
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + (height - margin.top - margin.bottom) + ")")
        .call(xAxis);

    // Add the Y Axis
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);

//add dots
svg.selectAll("circle")
   .data(dataset)
   .enter()
   .append("circle")
   .attr("cx", function(d) {
        return x(d[0]);
   })
   .attr("cy", function(d) {
        return y(d[1]);
   })
   .attr("r", 1);

line, path {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
}