Question

我有一个JSON数据类型，我将其存储在我的模型中以传递给视图。我还有一个条形图，我想用它来显示数据。但是，我只想显示一些字段，即SupplierName和Query。我已经按照d3教程来获取图表，但这是我第一次将其付诸实践。

有人知道怎么做吗？

控制器：

   public ActionResult ValueBySupplierAndClaimType(int ClientID, int ReviewPeriodID, int StatusCategoryID) {
            ValueBySupplierAndClaimTypeViewModel model = new ValueBySupplierAndClaimTypeViewModel {
                ReportData = reportRepo.GetValueBySupplierAndClaimType(ClientID, ReviewPeriodID, StatusCategoryID),
                ReportTitle = "Dashboard Breakdown",
                ReportDescription = "Breakdown for " + reviewRepo.GetAllReviewsByClientID(ClientID).Where(r => r.ReviewID == ReviewPeriodID).Select(r => r.ReviewPeriod).FirstOrDefault()
            };

            model.output = JsonConvert.SerializeObject(model.ReportData, Formatting.Indented);

            return View("ValueBySupplierAndClaimType", model);

JSON：

[  
  {
    "SupplierID": 4336,
    "SupplierName": "Test1",
    "AccountNo": 09579
    "Claim": null,
    "Normal": null,
    "Query": 1000.0000,
    "Formal": null,
    "Strong": null,
    "Unsubstantiated": null
  },
  {
    "SupplierID": 4357,
    "SupplierName": "Test2                 ",
    "AccountNo": 00124
    "Claim": null,
    "Normal": null,
    "Query": 9000.0000,
    "Formal": null,
    "Strong": null,
    "Unsubstantiated": null
  },
  {
    "SupplierID": 4395,
    "SupplierName": "Test3                   ",
    "AccountNo": 00001
    "Claim": null,
    "Normal": null,
    "Query": null,
    "Formal": null,
    "Strong": null,
    "Unsubstantiated": null
  }
]

D3：

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

    var margin = { top: 20, right: 20, bottom: 30, left: 40 },
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

    var x = d3.scale.ordinal()
        .rangeRoundBands([0, width], .1);

    var y = d3.scale.linear()
        .range([height, 0]);

    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")
        .ticks(10, "%");

    var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    d3.csv(@Model.output, type, function (error, data) {
        if (error) throw error;

        data.forEach(function(d) {

            //(function(d) {return d.SupplierName})
            //(function(d) {return d.Query})

            x.domain(data.map(function (d) { return d.SupplierName }));
            y.domain([0, d3.max(data, function (d) { return d.Query })]);

        })


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

        svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)
          .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .text("Query");

        svg.selectAll(".bar")
            .data(data)
          .enter().append("rect")
            .attr("class", "bar")
            .attr("x", function (d) { return x(d.SupplierName); })
            .attr("width", x.rangeBand())
            .attr("y", function (d) { return y(d.Query); })
            .attr("height", function (d) { return height - y(d.Query); });
    });

    function type(d) {
        d.Query = +d.Query;
        return d;
    }


</script>

我已经尝试过寻找一些答案但是并试图实施它们但似乎没有任何效果

Answer 1

您的代码存在两个问题：

<强> JSON

create()返回JSON（如名称所示），而不是CSV。因此，您应该使用function getURL(url) { window.location.href = url; }，但

请求

JsonConvert.SerializeObject()和d3.json使用URL as first parameter并触发XMLHttpRequest来获取数据，在加载时解析数据并将其传递给回调。

您的d3.csv包含一个包含完整JSON的字符串。您不需要请求数据，因为您已将其作为字符串。您只需要使用d3.json解析字符串，如下所示：

@Model.output

确保使用try-catch，因为JSON.parse可能会因无效的JSON而失败。

如何使用d3访问JSON数据？

1 个答案: