如何使用d3访问JSON数据？

我有一个JSON数据类型，我将其存储在我的模型中传递给视图。我还有一个我想用来显示数据的条形图。但是，我只想显示哪些字段是供应商名称和查询。我已经通过d3教程获取图表，但这是我第一次将它付诸实践。如何使用d3访问JSON数据？

有没有人有一个想法如何做到这一点？

控制器：

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>

我试图寻找一些答案，但并试图实现他们却什么也似乎工作

来源

2015-07-06 Andrew Kilburn

“CSV”对我来说看起来像JSON：'d3.json（...）' – Imperative

还有问题吗？请给我留言。如果我的答案解决了你的问题，你应该接受答案（http://stackoverflow.com/help/someone-answers）。通过这种方式，其他人可以看到你的问题已经解决，并且该工作得到了答案。 – jhinzmann

有两个问题与您的代码：

JSON

JsonConvert.SerializeObject()返回一个JSON（如名称所示）而不是CSV。因此加载它的传递给回调时，你应该使用d3.json，但

请求

d3.csv和d3.json采取URL as first parameter和火一个XMLHttpRequest来获取数据，分析数据。您的@Model.output包含完整的JSON字符串。由于您已将其作为字符串使用，因此您无需请求数据。你仅仅使用JSON.parse()解析字符串，像这样：

... 
//d3.csv(@Model.output, type, function (error, data) { 
try { 
    var data = JSON.parse("@Model.output"); 

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

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

来源

2015-07-06 18:04:03 jhinzmann

如何使用d3访问JSON数据？

回答

相关问题