使用实体框架将数据导出到 csv

Question

所以我想使用 d3.js 库并使用图表。 我想显示一年内打开了多少个项目， 并显示每个月已打开的项目总数。

我看到了这段代码：

d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/connectedscatter.csv",
...*GOING ON MORE*...

但我不想从 csv 读取数据，我想从我的数据库中读取它并将其发送到视图。 myabe 在 ViewBag 中..

我附上源代码： https://www.d3-graph-gallery.com/graph/connectedscatter_basic.html

我很想知道是否有一种方法可以以不同的方式将数据发送到 d3 而不是来自 csv，谢谢！

Answer 1

您可以使用d3.json(url,function(data){}) 将数据从控制器返回到视图。

这是一个简单的演示，如下所示：

1.型号：

public class TestModels
{
    public int Id { get; set; }
    public string date { get; set; }
    public double value { get; set; }
}

2.查看：

<div id="my_dataviz"></div>

@section Scripts{
    @*<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.6.0/d3.min.js"></script>*@
    <script src="https://d3js.org/d3.v4.js"></script>
    <script>
        // set the dimensions and margins of the graph
        var margin = { top: 10, right: 30, bottom: 30, left: 60 },
            width = 460 - margin.left - margin.right,
            height = 400 - margin.top - margin.bottom;
        // append the svg object to the body of the page
        var svg = d3.select("#my_dataviz")
            .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 + ")");
        //Read the data
        d3.json("Home/Test", 
             // Now I can use this dataset:
            function (data) {
                console.log(data);
                // Add X axis --> it is a date format
                var x = d3.scaleTime()
                    .domain(d3.extent(data, function (d) { return d3.timeParse("%Y-%m-%d")(d.date) }))
                    .range([0, width]);
                console.log(x);

                svg.append("g")
                    .attr("transform", "translate(0," + height + ")")
                    .call(d3.axisBottom(x));
                // Add Y axis
                var y = d3.scaleLinear()
                    .domain([8000, 9200])
                    .range([height, 0]);
                svg.append("g")
                    .call(d3.axisLeft(y));
                // Add the line
                svg.append("path")
                    .datum(data)
                    .attr("fill", "none")
                    .attr("stroke", "#69b3a2")
                    .attr("stroke-width", 1.5)
                    .attr("d", d3.line()
                        .x(function (d) { return x(d3.timeParse("%Y-%m-%d")(d.date)) })
                        .y(function (d) { return y(d.value) })
                    )
                // Add the points
                svg
                    .append("g")
                    .selectAll("dot")
                    .data(data)
                    .enter()
                    .append("circle")
                    .attr("cx", function (d) { return x(d3.timeParse("%Y-%m-%d")(d.date)) })
                    .attr("cy", function (d) { return y(d.value) })
                    .attr("r", 5)
                    .attr("fill", "#69b3a2")         
});
    </script>
}

3.控制器：

public class HomeController : Controller
{
    private readonly MyContext _context;
    public HomeController(MyContext context)
    {
        _context = context;
    }
    public IActionResult Index()
    {
        return View();
    }
    public IActionResult Test()
    {
        var data = new JsonResult(_context.TestModels.ToList());
        return data;
    }
}

4.结果：