Question

我试图在固定点上修复原点。我想在同一点上修复轴x和y 0刻度，这样当图表动态更新时它会自动修复。我已经静态修复了它...... here is fiddle link

var dataSet = [{ hour: 01, yval: 188, bar: "0", color: "red" },
    { hour: 02, yval: 63, bar: "1", color: "deepskyblue" },
    { hour: 14, yval: 241, bar: "0", color: "red" },
    { hour: -15, yval: 241, bar: "3", color: "green" },
    { hour: 19, yval: 241, bar: "0", color: "red" },
    { hour: 22, yval: 318, bar: "3", color: "green" },
    { hour: -08, yval: -118, bar: "1", color: "deepskyblue" },
    { hour: 22, yval: -48, bar: "0", color: "red" },
    { hour: 21, yval: 31, bar: "1", color: "deepskyblue" },
    { hour: 12, yval: 38, bar: "0", color: "red" },
    { hour: 16, yval: 138, bar: "3", color: "green" },
    { hour: 05, yval: 344, bar: "1", color: "deepskyblue" },
    { hour: 08, yval: 218, bar: "1", color: "deepskyblue" },
    { hour: 03, yval: -18, bar: "0", color: "red" },
    { hour: 18, yval: 78, bar: "3", color: "green" },
    { hour: -18, yval: 98, bar: "1", color: "deepskyblue" }
];

var w = 500,
    h = 500,
    top_pad = 20,
    left_pad = 100;
var x = d3.scale.linear()
    .domain([d3.min(dataSet, function(d) {
        return d.hour;
    }), d3.max(dataSet, function(d) {
        return d.hour;
    })])
    .range([left_pad, w - left_pad]),
    y = d3.scale.linear()
    .domain([d3.min(dataSet, function(d) {
        return d.yval;
    }), d3.max(dataSet, function(d) {
        return d.yval;
    })])
    .range([h - top_pad, top_pad]);


var svg = d3.select("body")
    .append("svg:svg")
    .attr("width", w + left_pad)
    .attr("height", h + top_pad);

var symbolTypes = {
    "triangleUp": d3.svg.symbol().type("triangle-up"),
    "circle": d3.svg.symbol().type("circle"),
    "diamond": d3.svg.symbol().type("diamond"),
};


svg.selectAll("path")
    .data(dataSet)
    .enter().append("path")
    .attr("class", "dot")
    .attr("transform", function(d) {
        return "translate(" + x(d.hour) + "," + y(d.yval) + ")";
    })
    .attr("d", function(d, i) {
        if (d.bar === "0")
            return symbolTypes.circle();
        else if (d.bar === "1")
            return symbolTypes.triangleUp();
        else
            return symbolTypes.diamond();
    })
    .style("fill", function(d) {
        return d.color;
    });


var xAxis = d3.svg.axis().scale(x).orient("bottom"),
    yAxis = d3.svg.axis().scale(y).orient("left");

svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(0, 362)")
    .call(xAxis);

svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate( 221, 0)")
    .call(yAxis);

`

Answer 1

解决方案很简单：在平移轴时使用两个刻度：

svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(0," + y(0) + ")")
    //your y scale here -----------------^
    .call(xAxis);

svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(" + x(0) + ", 0)")
    //your x scale here --------------^
    .call(yAxis);

这是您更新的jsfiddle：http://jsfiddle.net/dazeotfw/

Stack代码段中的相同代码：

＆＃13;

var dataSet = [{
  hour: 01,
  yval: 188,
  bar: "0",
  color: "red"
}, {
  hour: 02,
  yval: 63,
  bar: "1",
  color: "deepskyblue"
}, {
  hour: 14,
  yval: 241,
  bar: "0",
  color: "red"
}, {
  hour: -15,
  yval: 241,
  bar: "3",
  color: "green"
}, {
  hour: 19,
  yval: 241,
  bar: "0",
  color: "red"
}, {
  hour: 22,
  yval: 318,
  bar: "3",
  color: "green"
}, {
  hour: -08,
  yval: -118,
  bar: "1",
  color: "deepskyblue"
}, {
  hour: 22,
  yval: -48,
  bar: "0",
  color: "red"
}, {
  hour: 21,
  yval: 31,
  bar: "1",
  color: "deepskyblue"
}, {
  hour: 12,
  yval: 38,
  bar: "0",
  color: "red"
}, {
  hour: 16,
  yval: 138,
  bar: "3",
  color: "green"
}, {
  hour: 05,
  yval: 344,
  bar: "1",
  color: "deepskyblue"
}, {
  hour: 08,
  yval: 218,
  bar: "1",
  color: "deepskyblue"
}, {
  hour: 03,
  yval: -18,
  bar: "0",
  color: "red"
}, {
  hour: 18,
  yval: 78,
  bar: "3",
  color: "green"
}, {
  hour: -18,
  yval: 98,
  bar: "1",
  color: "deepskyblue"
}];

var w = 500,
  h = 500,
  top_pad = 20,
  left_pad = 100;
var x = d3.scale.linear()
  .domain([d3.min(dataSet, function(d) {
    return d.hour;
  }), d3.max(dataSet, function(d) {
    return d.hour;
  })])
  .range([left_pad, w - left_pad]),
  y = d3.scale.linear()
  .domain([d3.min(dataSet, function(d) {
    return d.yval;
  }), d3.max(dataSet, function(d) {
    return d.yval;
  })])
  .range([h - top_pad, top_pad]);


var svg = d3.select("body")
  .append("svg:svg")
  .attr("width", w + left_pad)
  .attr("height", h + top_pad);

var symbolTypes = {
  "triangleUp": d3.svg.symbol().type("triangle-up"),
  "circle": d3.svg.symbol().type("circle"),
  "diamond": d3.svg.symbol().type("diamond"),
};


svg.selectAll("path")
  .data(dataSet)
  .enter().append("path")
  .attr("class", "dot")
  .attr("transform", function(d) {
    return "translate(" + x(d.hour) + "," + y(d.yval) + ")";
  })
  .attr("d", function(d, i) {
    if (d.bar === "0")
      return symbolTypes.circle();
    else if (d.bar === "1")
      return symbolTypes.triangleUp();
    else
      return symbolTypes.diamond();
  })
  .style("fill", function(d) {
    return d.color;
  });

var xAxis = d3.svg.axis().scale(x).orient("bottom"),
  yAxis = d3.svg.axis().scale(y).orient("left");

svg.append("g")
  .attr("class", "axis")
  .attr("transform", "translate(0," + y(0) + ")")
  .call(xAxis);

svg.append("g")
  .attr("class", "axis")
  .attr("transform", "translate(" + x(0) + ", 0)")
  .call(yAxis);

＆＃13;

.axis path,
.axis line {
  fill: none;
  stroke: #aaa;
  shape-rendering: crispEdges;
}

.axis text {
  font-family: sans-serif;
  font-size: 11px;
}

＆＃13;

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

＆＃13;

想在d3图表中修复原点

1 个答案: