Javascript 如何使用d3访问JSON数据？

我有一个JSON数据类型，我将它存储在我的模型中以传递给视图。我也有一个条形图，我想用它来显示数据。但是，我只想显示一些字段，即供应商名称和查询。我已经完成了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:

D3：

var margin={top:20，right:20，bottom:30，left:40}，
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
var x=d3.scale.ordinal（）
.rangeRoundBands（[0，宽度]，.1）；
变量y=d3.scale.linear（）
.范围（[高度，0]）；
var xAxis=d3.svg.axis（）
.比例（x）
.东方（“底部”）；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）
.勾号（10，“%”）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
d3.csv（@Model.output，类型，函数（错误，数据）{
如果（错误）抛出错误；
data.forEach（函数（d）{
//（函数（d）{返回d.SupplierName}）
//（函数（d）{return d.Query}）
x、 域（data.map（函数（d）{return d.SupplierName}））；
y、 域（[0，d3.max（数据，函数（d）{返回d.Query}）]；
})
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“dy”，“.71em”）
.style（“文本锚定”、“结束”）
.文本（“查询”）；
svg.selectAll（“.bar”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“类”、“条”）
.attr（“x”，函数（d）{return x（d.SupplierName）；}）
.attr（“宽度”，x.rangeBand（））
.attr（“y”，函数（d）{返回y（d.Query）；}）
.attr（“height”，函数（d）{返回height-y（d.Query）；}）；
});
功能类型（d）{
d、 Query=+d.Query；
返回d；
}

---

我尝试过寻找一些答案，但也尝试过实现它们，但似乎没有任何效果

您的代码有两个问题：

JSON

JsonConvert.SerializeObject（）

返回JSON（如名称所示），而不是CSV。因此，您应该使用

d3.json

，但是

请求

d3.csv

和

d3.json

执行并启动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而失败。

在我看来，“CSV”类似于JSON:

d3.JSON（…）

您的问题还有问题吗？请给我留言。如果我的回答解决了你的问题，你就会明白。这样，其他人就可以看到你的问题已经解决了，哪个答案起作用了。

 <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>

...
//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){
  ...
}