Question

var data = [
{
  "nrPers": 500,
  "actionDateStart": "2016-01-01T00:01:00",
  "actionDateStop": "2016-01-01T00:02:00",
  "tipRaport": 0
},
{
  "nrPers": 600,
  "actionDateStart": "2016-01-01T00:02:00",
  "actionDateStop": "2016-01-01T00:03:00",
  "tipRaport": 0
},
{
  "nrPers": 900,
  "actionDateStart": "2016-01-01T00:03:00",
  "actionDateStop": "2016-01-01T00:04:00",
  "tipRaport": 0
},
{
  "nrPers": 50,
  "actionDateStart": "2016-01-01T00:04:00",
  "actionDateStop": "2016-01-01T00:05:00",
  "tipRaport": 0
},
{
  "nrPers": 5000,
  "actionDateStart": "2016-01-01T00:05:00",
  "actionDateStop": "2016-01-01T00:06:00",
  "tipRaport": 0
},
{
  "nrPers": 511,
  "actionDateStart": "2016-01-01T00:06:00",
  "actionDateStop": "2016-01-01T00:07:00",
  "tipRaport": 0
},
{
  "nrPers": 600,
  "actionDateStart": "2016-01-01T00:07:00",
  "actionDateStop": "2016-01-01T00:02:00",
  "tipRaport": 0
},
{
  "nrPers": 900,
  "actionDateStart": "2016-01-01T00:08:00",
  "actionDateStop": "2016-01-01T00:03:00",
  "tipRaport": 0
},
{
  "nrPers": 4500,
  "actionDateStart": "2016-01-01T00:09:00",
  "actionDateStop": "2016-01-01T00:04:00",
  "tipRaport": 0
},
{
  "nrPers": 590,
  "actionDateStart": "2016-01-01T00:10:00",
  "actionDateStop": "2016-01-01T00:05:00",
  "tipRaport": 0
},
{
  "nrPers": 5000,
  "actionDateStart": "2016-01-01T00:11:00",
  "actionDateStop": "2016-01-01T00:06:00",
  "tipRaport": 0
},
{
  "nrPers": 3647,
  "actionDateStart": "2016-01-01T00:12:00",
  "actionDateStop": "2016-01-01T01:07:00",
  "tipRaport": 0
},
{
  "nrPers": 1700,
  "actionDateStart": "2016-01-01T00:01:00",
  "actionDateStop": "2016-01-01T02:08:00",
  "tipRaport": 0
},
{
  "nrPers": 2400,
  "actionDateStart": "2016-01-01T00:02:00",
  "actionDateStop": "2016-01-01T00:03:00",
  "tipRaport": 0
},
{
  "nrPers": 500,
  "actionDateStart": "2016-01-01T00:03:00",
  "actionDateStop": "2016-01-01T00:07:00",
  "tipRaport": 0
},
{
  "nrPers": 1212,
  "actionDateStart": "2016-01-01T00:04:00",
  "actionDateStop": "2016-01-01T00:05:00",
  "tipRaport": 0
},
{
  "nrPers": 2324,
  "actionDateStart": "2016-01-02T00:05:00",
  "actionDateStop": "2016-01-02T00:06:00",
  "tipRaport": 0
},
{
  "nrPers": 5656,
  "actionDateStart": "2016-02-02T00:06:00",
  "actionDateStop": "2016-02-02T00:07:00",
  "tipRaport": 0
},
{
  "nrPers": 3222,
  "actionDateStart": "2016-02-02T00:07:00",
  "actionDateStop": "2016-02-02T00:08:00",
  "tipRaport": 0
}];

        var tip = d3.tip()
        .attr('class', 'd3-tip')
        .html(function (d) { return '<span>' + d.nrPers + '</span>' + ' clienti' })
         .offset([-12, 0])
        var w = 1100,
            h = 400,
            padt = 50, padr = 0, padb = 100, padl = 40,
            x = d3.scale.ordinal().rangeRoundBands([0, w], .1);
        y = d3.scale.linear().range([h, 0]),
        yAxis = d3.svg.axis().scale(y).orient('left').tickSize(-w + padl + padr),
        xAxis = d3.svg.axis().scale(x).orient("bottom");

        vis = d3.select('#graph')
          .append('svg')
          .attr('width', w)
          .attr('height', h + padt + padb)
        .append('g')
          .attr('transform', 'translate(' + padl + ',' + padt + ')')
        var max = d3.max(data, function (d) { return d.nrPers })

        x.domain(data.map(function (d) { return ((dateFormat(new Date(d.actionDateStart))).toString() + " - " + dateFormat(new Date(d.actionDateStop)).toString());}))
        y.domain([0, max])
        vis.call(tip)

        vis.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + h + ")")
        .call(xAxis)
        .selectAll("text")  
        .style("text-anchor", "end")
        .attr("dx", "-.8em")
        .attr("dy", ".15em")
        .attr("transform", "rotate(-65)" );

        vis.append("g")
          .attr("class", "y axis")
          .call(yAxis)

        var bars = vis.selectAll('g.bar')
          .data(data)
        .enter().append('g')
          .attr('class', 'bar')
          .attr('transform', function (d, i) { return "translate(" + x(i) + ", 0)" })
        bars.append('rect')
          .attr('x', function (d) { return x(dateFormat(new Date(d.actionDateStart)).toString() + " - " + dateFormat(new Date(d.actionDateStop)).toString());})
          .attr('width', x.rangeBand())
          .attr('height', function (d) { return h - y(d.nrPers) })
          .attr('y', function (d) { return y(d.nrPers) })
          .on('mouseover', tip.show)
          .on('mouseout', tip.hide)
    });

Answer 1

您可以通过附加＆＃39; rect＆＃39;来设置有界平移。 svg的元素。

vis = d3.select('#graph')
      .append('svg')
      .attr('width', w)
      .attr('height', h);

vis.append('rect')
    .attr('stroke', 'transparent')
    .attr('fill', 'transparent')
    .attr('x', 0)
    .attr('y', 0)
    .attr('width', //panning width)
    .attr('height',//panning height)
    .call(//this.action);

在添加＆＃39; rect＆＃39;

后尝试添加剩余的逻辑

我不知道如何在这种情况下在D3中进行有界平移，任何想法？

1 个答案: