Question

我已经四处搜索，但似乎无法理解我在d3中绘制这些数据的问题。 cx和cy坐标对我来说似乎是正确的，但所有点都在远离屏幕的情况下呈现。

首先我用数据加载数组（这是以角度完成的。我跳过几行数组forEach但是这是重要的部分）：

dataArray.push({
   'x_axis': new Date($scope.thisCompany.acquisition[key].date),
   'y_axis': new Date($scope.thisCompany.acquisition[key].date).getMonth(),
   'radius': '20',
   'color': 'red'
});

数据阵列最终会出现如下：

[{x_axis: Date 2017-07-16T05:00:00.000Z ,y_axis: 6, radius: '20', color: 'red'}, {x_axis: Date 2017-07-29T05:00:00.000Z ,y_axis: 6, radius: '20', color: 'red'},{x_axis: Date 2003-09-03T05:00:00.000Z ,y_axis: 8, radius: '20', color: 'red'}]

最后这里是d3代码。（编辑）我之前忘记添加这个因为我太累了，但是y轴应该是图形月（Jan，feb等），x轴应该是图形年（2001年） 2002 2003）：

                var foundedOn = new Date($scope.thisCompany.foundedOn);
                const todaysDate = new Date();
                const selectGraph = d3.select('#acquisition-history-chart').append('svg')
                    .attr('width' , '100%')
                    .attr('height' , '100%');
                const xScale = d3.scaleTime()
                    .domain([foundedOn , todaysDate])
                    .range([0 , 700]);
                const yScale = d3.scaleTime()
                    .domain([new Date(2012, 11, 31) , new Date(2012, 0, 1)])
                    .range([240 , 0]);
                const xAxis = d3.axisBottom()
                    .scale(xScale);
                const yAxis = d3.axisLeft()
                    .scale(yScale)
                    .tickFormat(d3.timeFormat("%b"));
                const circles = selectGraph.selectAll('circle')
                    .data(dataArray)
                        .enter()
                        .append('circles');
                const circleAttributes = circles
                    .attr('cx' , function(d) { return xScale(d.x_axis); })
                    .attr('cy' , function(d) { return d.y_axis; })
                    .attr('r' , function(d) { return d.radius; })
                    .style('fill' , function(d) { return d.color; });
                selectGraph.append('g')
                    .attr('transform', 'translate(50, 260)')
                    .attr('class' , 'xAxis')
                    .call(xAxis);
                selectGraph.append('g')
                    .attr('transform', 'translate(20, 35)')
                    .attr('class' , 'yAxis')
                    .call(yAxis);

这是一个JS小提琴。无法在此处显示图表。仍在努力：https://jsfiddle.net/d3zv8Lon/

Answer 1

如果yScale域位于2012年初和2012年底之间，那么y_axis中的月份也需要在2012年。如果它们只是几个月，它们将默认为1900.

jsfiddle

<!DOCTYPE html>

<body>
  <style>
    #company-acquisition-graph {
      width: 100%;
      height: 290px;
      /*background: #1B1B1B;*/
      background: gray;
      border: 1px solid #383838;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.18);
      border-radius: 3px;
      clear: both;
      #acquisition-history-chart {
        border-radius: 3px;
        .xAxis,
        .yAxis {
          path,
          line {
            stroke: #1B1B1B;
          }
          text {
            fill: white;
          }
        }
        .yAxis text {
          text-transform: uppercase;
          font-weight: 300;
          text-anchor: start;
        }
        .yAxis g:nth-child(odd) text {
          font-size: 8px;
          stroke: #B9B9B9
        }
        .yAxis g:nth-child(even) text {
          font-size: 11px;
        }
        .xAxis g:nth-child(even) text {
          stroke: #B9B9B9;
        }
      }
    }
  </style>
  <div id="company-acquisition-graph">
    <div style="width:100%; height: 290px;" id="acquisition-history-chart">
    </div>
  </div>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script>
    var dataArray = [{
      "x_axis": new Date('2017-07-16T05:00:00.000'),
      "y_axis": new Date('2012-06-01'),
      "radius": 20,
      "color": "red"
    }, {
      "x_axis": new Date('2017-07-29T05:00:00.000'),
      "y_axis": new Date('2012-06-01'),
      "radius": 20,
      "color": "red"
    }, {
      "x_axis": new Date('2003-09-03T05:00:00.000'),
      "y_axis": new Date('2012-08-01'),
      "radius": 20,
      "color": "red"
    }];

    var foundedOn = new Date(1989, 00, 01);

    const todaysDate = new Date();

    const selectGraph = d3.select('#acquisition-history-chart').append('svg')
      .attr('width', '100%')
      .attr('height', '100%');

    const xScale = d3.scaleTime()
      .domain([foundedOn, todaysDate])
      .range([0, 700]);

    const yScale = d3.scaleTime()
      .domain([new Date(2012, 11, 31), new Date(2012, 0, 1)])
      .range([240, 0]);

    const xAxis = d3.axisBottom()
      .scale(xScale);

    const yAxis = d3.axisLeft()
      .scale(yScale)
      .tickFormat(d3.timeFormat("%b"));

    const circles = selectGraph.selectAll('circle')
      .data(dataArray);

    var newCircles1 = circles.enter();

    newCircles1.append('circle')
      .attr("class", "seeMe")
      .attr('cx', function(d) {
        return xScale(d.x_axis);
      })
      .attr('cy', function(d) {
        return yScale(d.y_axis);
      })
      .attr('transform', 'translate(50, 0)')
      .attr('r', function(d) {
        return d.radius;
      })
      .style('fill', function(d) {
        return d.color;
      });

    selectGraph.append('g')
      .attr('transform', 'translate(50, 260)')
      .attr('class', 'xAxis')
      .call(xAxis);

    selectGraph.append('g')
      .attr('transform', 'translate(20, 35)')
      .attr('class', 'yAxis')
      .call(yAxis);
  </script>

此外，您的圈子需要正确平移以正确排列x轴。

在D3 v4中无法在两个轴上绘制日期

1 个答案: