D3.Js 条形图问题

Question

我正在尝试使用 D3.js 绘制条形图，但没有成功。我正在尝试如下

Model.cs public class 条形图 { public DateTime TaskDate { get;放; } public浮动持续时间{得到;放; } }

Index.cshtml 在我的 Index.cshtml 中（razor 语法，mvc 视图）我有以下代码来绘制条形图

<head>
    <meta name="viewport" content="width=device-width" />
    <title> Report</title>
    <script type="text/javascript" src="/Scripts/d3.js"></script>
    <script type="text/javascript" src="https:/Scripts/d3pie.js"></script>
    <script type="text/javascript" src="https:/Scripts/d3.tip.v0.6.3.js"></script>
    .axis path, .axis line
    {
    fill: none;
    stroke: #777;
    shape-rendering: crispEdges;
    }

    .axis text
    {
    font-family: 'Arial';
    font-size: 13px;
    }
    .tick
    {
    stroke-dasharray: 1, 2;
    }
    .bar
    {
    fill: FireBrick;
    }
</head>

条形图java脚本

<svg id="visualisation" width="1000" height="500"></svg>

<script>
    var jsonData  = @Html.Raw(Json.Encode(Model.BarChart));


    data = jsonData;

    InitChart();

    function InitChart() {

        var barData = data;

        var vis = d3.select('#visualisation'),
          WIDTH = 1000,
          HEIGHT = 500,
          MARGINS = {
              top: 20,
              right: 20,
              bottom: 20,
              left: 50
          },
          xRange = d3.scale.ordinal().rangeRoundBands([MARGINS.left, WIDTH - MARGINS.right], 0.1).domain(barData.map(function (d) {
              return d.Date;
          })),


          yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([0,
            d3.max(barData, function (d) {
                return d.Duration;
            })
          ]),

          xAxis = d3.svg.axis()
            .scale(xRange)
            .tickSize(5)
            .tickSubdivide(true),

          yAxis = d3.svg.axis()
            .scale(yRange)
            .tickSize(5)
            .orient("left")
            .tickSubdivide(true);


        vis.append('svg:g')
          .attr('class', 'x axis')
          .attr('transform', 'translate(0,' + (HEIGHT - MARGINS.bottom) + ')')
          .call(xAxis);

        vis.append('svg:g')
          .attr('class', 'y axis')
          .attr('transform', 'translate(' + (MARGINS.left) + ',0)')
          .call(yAxis);

        vis.selectAll('rect')
          .data(barData)
          .enter()
          .append('rect')
          .attr('x', function (d) {
              return xRange(d.Date);
          })
          .attr('y', function (d) {
              return yRange(d.Duration);
          })
          .attr('width', xRange.rangeBand())
          .attr('height', function (d) {
              return ((HEIGHT - MARGINS.bottom) - yRange(d.Duration));
          })
          .attr('fill', 'grey')
          .on('mouseover', function (d) {
              d3.select(this)
                .attr('fill', 'blue');
          })
          .on('mouseout', function (d) {
              d3.select(this)
                .attr('fill', 'grey');
          });

    }
</script>

我在控制台中遇到错误

Error: Invalid value for <rect> attribute height="NaN"
Error: Invalid value for <rect> attribute y="NaN"

Answer 1

这是猜测。

尝试将所有 d.y 更改为 d.duration（或 d.Duration）并使您的模型成为一个值数组。

您的 d3 代码基于 data aka barData aka jsonData 是一个数组的想法。您当前的代码不是这种情况。

http://plnkr.co/edit/Koz58SZJ1C9hS2rDmBSj?p=preview

D3.Js 条形图问题

D3.Js Bar Chart issue

d3.js