Экспорт данных в CSV с использованием Entity Framework

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.Model:

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.Результат: