Question

我是D3的初学者，对此并不了解。我目前正在尝试使用D3在图表上绘制2D线。我已成功绘制线条，添加轴，甚至为绘图添加缩放功能。

我坚持让线条铰接到y轴，这样你就不能点击它并向左或向右移动（目前如果你要运行jsfiddle，你可以点击它并移动绘制的线条）。我仍然想要放大或缩小。但它应该保持与y轴的关系。如果这澄清了我的问题，请告诉我。谢谢！

链接到JS小提琴： https://jsfiddle.net/adityap16/4sts8nfs/2/

代码

var data = [{
  "mytime": "2015-12-01T23:10:00.000Z",
  "value": 64
}, {
  "mytime": "2015-12-01T23:15:00.000Z",
  "value": 67
}, {
  "mytime": "2015-12-01T23:20:00.000Z",
  "value": 70
}, {
  "mytime": "2015-12-01T23:25:00.000Z",
  "value": 64
}, {
  "mytime": "2015-12-01T23:30:00.000Z",
  "value": 72
}, {
  "mytime": "2015-12-01T23:35:00.000Z",
  "value": 75
}, {
  "mytime": "2015-12-01T23:40:00.000Z",
  "value": 71
}, {
  "mytime": "2015-12-01T23:45:00.000Z",
  "value": 80
}, {
  "mytime": "2015-12-01T23:50:00.000Z",
  "value": 83
}, {
  "mytime": "2015-12-01T23:55:00.000Z",
  "value": 86
}, {
  "mytime": "2015-12-02T00:00:00.000Z",
  "value": 80
}, {
  "mytime": "2015-12-02T00:05:00.000Z",
  "value": 85
}];
var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%S.%LZ").parse;

data.forEach(function(d) {
  d.mytime = parseDate(d.mytime);
});
//var margin = { top: 30, right: 30, bottom: 40, left:50 },
var margin = {
    top: 30,
    right: 30,
    bottom: 40,
    left: 50
  },
  height = 200,
  width = 900;
var color = "green";
var xaxis_param = "mytime";
var yaxis_param = "value";
var params1 = {
  margin: margin,
  height: height,
  width: width,
  color: color,
  xaxis_param: xaxis_param,
  yaxis_param: yaxis_param
};

draw_graph(data, params1);

function draw_graph(data, params) {

  var make_x_axis = function() {
    return d3.svg.axis()
      .scale(x_scale)
      .orient("bottom")
      .ticks(5);
  };

  var make_y_axis = function() {
    return d3.svg.axis()
      .scale(y_scale)
      .orient("left")
      .ticks(5);
  };

  //Get the margin
  var xaxis_param = params.xaxis_param;
  var yaxis_param = params.yaxis_param;
  var color_code = params.color;
  var margin = params.margin;
  var height = params.height - margin.top - margin.bottom,
    width = params.width - margin.left - margin.right;

  var x_extent = d3.extent(data, function(d) {
    return d[xaxis_param]
  });

  var y_extent = d3.extent(data, function(d) {
    return d[yaxis_param]
  });

  var x_scale = d3.time.scale()
    .domain(x_extent)
    .range([0, width]);

  var y_scale = d3.scale.linear()
    .domain([0, y_extent[1]])
    .range([height, 0]);

  var zoom = d3.behavior.zoom()
    .x(x_scale)
    .y(y_scale)
    .on("zoom", zoomed);


  //Line
  var line = d3.svg.line()
    .defined(function(d) {
      return d[yaxis_param];
    })
    .x(function(d) {
      return x_scale(d[xaxis_param]);
    })
    .y(function(d) {
      return y_scale(d[yaxis_param]);
    });

  var lineRef = d3.svg.line()
    .x(function(d) {
      return x_scale(d[xaxis_param]);
    })
    .y(function(d) {
      return y_scale(20);
    });

  var myChart = d3.select('body').append('svg')
    .attr('id', 'graph')
    .style('background', '#E7E0CB')
    .attr('width', width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom)
    .append('g')
    .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')')
    .call(zoom);

   myChart.append("svg:rect")
    .attr("width", width)
    .attr("height", height)
    .attr("class", "plot");


  var legend = myChart.append("g")
    .attr("class", "legend")
    .attr("transform", "translate(" + 5 + "," + (height - 25) + ")")

  legend.append("rect")
    .style("fill", color_code)
    .attr("width", 20)
    .attr("height", 20);

  legend.append("text")
    .text(yaxis_param)
    .attr("x", 25)
    .attr("y", 12);


  var vAxis = d3.svg.axis()
    .scale(y_scale)
    .orient('left')
    .ticks(5)


  var hAxis = d3.svg.axis()
    .scale(x_scale)
    .orient('bottom')
    .ticks(5);

  var majorAxis = d3.svg.axis()
    .scale(x_scale)
    .orient('bottom')
    .ticks(d3.time.day, 1)
    .tickSize(-height)
    .outerTickSize(0);

  myChart.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(hAxis);

  myChart.append("g")
    .attr("class", "x axis major")
    .attr("transform", "translate(0," + height + ")")
    .call(majorAxis);

  myChart.append("g")
    .attr("class", "y axis")
    .call(vAxis);

  var circlePoint = myChart.selectAll('circle')
                         .data(data)
                         .enter()
                         .append("circle");

    var circleAttributes = circlePoint
                           .attr("cx", function (d) { return x_scale(d[xaxis_param]); })
                           .attr("cy", function (d) { return y_scale(d[yaxis_param]); })
                           .attr("r", 3)
                           .style("fill", "none")
                           .style("stroke", "red");

    var clip = myChart.append("svg:clipPath")
    .attr("id", "clip")
    .append("svg:rect")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", width)
    .attr("height", height);

    var chartBody = myChart.append("g")
    .attr("clip-path", "url(#clip)");



chartBody.append("svg:path")
    .datum(data)
    .attr('class', 'line')
    .attr("d", line)
    .attr('stroke', color_code)
    .attr('stroke-width', 1)
    .attr('fill', 'none');

  chartBody
    .append('svg:path')
    .datum(data)
    .attr('class', 'line1')
    .attr("d", lineRef)
    .attr('stroke', 'blue')
    .attr('stroke-width', 1)
    .style("stroke-dasharray", ("3, 3"))
    .attr('fill', 'none');

  function zoomed() {
    myChart.select(".x.axis").call(hAxis);
    myChart.select(".y.axis").call(vAxis);
    myChart.select(".x.axis.major").call(majorAxis);
    myChart.select(".line")
        .attr("class", "line")
        .attr("d", line);
    myChart.select(".line1")
        .attr("class", "line1")
        .attr("d", lineRef);


  }
}

Answer 1

添加此.on("mousedown.zoom", null)以禁用平移：

 var myChart = d3.select('body').append('svg')
    .attr('id', 'graph')
    .style('background', '#E7E0CB')
    .attr('width', width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom)
    .append('g')
    .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')')
    .call(zoom)
        .on("mousedown.zoom", null);//disable panning

工作代码here

D3.JS：在2D绘图中绘制线条静态wrt轴

1 个答案: