我是 Mike Bostock 的 d3.js 图表库的忠实粉丝：d3js.org。
我想用它在 C# .Net 应用程序中显示图表，但我不知道是否可行。
可以通过生成 HTM+JS 代码并在 webbrowser 窗口中呈现它来实现。但是，我知道 d3.js 库不能在没有网络服务器的情况下在本地使用（但是我不明白没有网络服务器的情况以及需要网络服务器的情况），因此简单的解决方案不起作用。
有没有人尝试开发这种 d3.js 图表的部署？您是否知道从哪里开始以获得最简单的解决方案？
问问题
26189 次
3 回答
16
Web 服务器绝对不需要使用像 d3.js 这样的客户端 JavaScript 库。
对于 C#，您需要嵌入 Web 浏览器控件（在 WindowsForms 或 WPF 中）。
您需要确保浏览器在 IE9 标准模式下工作，如此处所示。
像往常一样创建您的网页。使用 webbrowser.navigate 导航到它们（就像文件系统上的文件一样。）
这应该有效。
于 2012-08-28T12:39:45.313 回答
10
死灵术。
您可以在所有使用 nodeJS 的操作系统上使用 C# 和 .NET-Core 执行此操作。
绝对不需要浏览器控制。
只需使用 nuget 安装JavaScript-Services，然后在 nodejs 中安装 d3、jsdom 和 svg2png：
npm install –save svg2png
npm install –save jsdom
npm install –save d3
然后在 Startup.cs 中，在 ConfigureServices 中添加 NodeServices
using Microsoft.AspNetCore.NodeServices;
public void ConfigureServices(IServiceCollection services)
{
// services.AddMvc();
// https://geeks.ms/clanderas/2016/10/18/asp-net-core-node-services-to-execute-your-nodejs-scripts/
// https://blogs.msdn.microsoft.com/webdev/2017/02/14/building-single-page-applications-on-asp-net-core-with-javascriptservices/
services.AddNodeServices( options => {
// options.DebuggingPort
});
}
添加一个输出处理程序：
public class AgeInfo
{
public string age;
public int population;
public AgeInfo(string prmAge, int prmPop)
{
this.age = prmAge;
this.population = prmPop;
}
}
// http://gunnarpeipman.com/2017/10/aspnet-core-node-d3js/
public async Task<IActionResult> Chart([FromServices] INodeServices nodeServices)
{
var options = new { width = 400, height = 200 };
var data = new[] {
new { label = "Abulia", count = 10 },
new { label = "Betelgeuse", count = 20 },
new { label = "Cantaloupe", count = 30 },
new { label = "Dijkstra", count = 40 }
};
List<AgeInfo> ls = new List<AgeInfo>();
ls.Add( new AgeInfo("<5", 2704659));
ls.Add( new AgeInfo("5-13", 4499890));
ls.Add( new AgeInfo("14-17", 2159981));
ls.Add( new AgeInfo("18-24", 3853788));
ls.Add( new AgeInfo("25-44", 14106543));
ls.Add( new AgeInfo("45-64", 8819342));
ls.Add( new AgeInfo("≥65", 612463));
// string markup = await nodeServices.InvokeAsync<string>("Node/d3Pie.js", options, data);
string markup = await nodeServices.InvokeAsync<string>("Node/d3chart.js", options, ls);
string html = @"<!DOCTYPE html>
<html>
<head><meta charset=""utf-8"" />
<style type=""text/css"">
.arc text
{
font: 10px sans-serif;
text-anchor: middle;
}
.arc path
{
stroke: #fff;
}
</style>
</head>
<body>
<img src=""" + markup + @""" />
</body>
</html>";
return Content(html, "text/html");
}
然后添加 JavaScript
// Include all modules we need
const svg2png = require("svg2png");
const { JSDOM } = require("jsdom");
const d3 = require('d3');
// https://bl.ocks.org/mbostock/3887235
module.exports = function (callback, options, data) {
var dom = new JSDOM('<!DOCTYPE html><html><head><meta charset="utf-8" /></head><body><svg width="960" height="500"></svg></body></html>');
var document = dom.window.document;
dom.window.d3 = d3.select(dom.window.document);
// callback(null, dom.window.document.body.innerHTML);
var svg = dom.window.d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
radius = Math.min(width, height) / 2,
g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var color = d3.scaleOrdinal(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var pie = d3.pie()
.sort(null)
.value(function (d) {
return d.population;
});
var path = d3.arc()
.outerRadius(radius - 10)
.innerRadius(0);
var label = d3.arc()
.outerRadius(radius - 40)
.innerRadius(radius - 40);
/*
var dataaa =
[
{
age: "<5",
population: 2704659
},
{
age: "5-13",
population: 4499890
},
{
age: "14-17",
population: 2159981
},
{
age: "18-24",
population: 3853788
},
{
age: "25-44",
population: 14106543
}
,
{
age: "45-64",
population: 8819342
}
,
{
age: "≥65",
population: 612463
}
];
*/
var arc = g.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc");
arc.append("path")
.attr("d", path)
.attr("fill", function (d) {
return color(d.data.age);
});
arc.append("text")
.attr("transform", function (d) {
return "translate(" + label.centroid(d) + ")";
})
.attr("dy", "0.35em")
.text(function (d) {
return d.data.age;
});
//});
// var svgText = dom.window.document.body.outerHTML;
// var svgText = dom.window.document.body.innerHTML;
var svgText = dom.window.document.body.querySelector("svg").outerHTML
// callback(null, svgText);
// var svgText = dom.window.d3.select("svg").html();
// svgText=process.version; // v8.6.0
// svgText= JSON.stringify(process.versions); //
// var pjson = require('./package.json'); svgText = pjson.version;
// callback(null, svgText);
// callback(null, JSON.stringify( { width: width, height: height } ));
// var buf = Buffer.from(svgText);
// callback(null, JSON.stringify( buf ));
// var output = svg2png.sync(buf, { width: width, height: height } );
// callback(null, JSON.stringify( output ));
//callback(null, svgText);
// callback(null, 'data:image/svg+xml;base64,' + Buffer.from(svgText).toString('base64'));
svg2png(Buffer.from(svgText), { width: width, height: height })
.then(buffer => 'data:image/png;base64,' + buffer.toString('base64') )
.then(buffer => callback(null, buffer));
}
这应该为您提供所需的 d3 图表，而无需兼容 svg 的浏览器。
您可能需要先更新 npm，然后才能（成功）安装任何 nodeJS 模块。
npm install -g npm
您也可以在命令行应用程序中执行此操作，只是需要设置自己的 DI 约束器。
于 2018-01-08T15:12:07.597 回答
1
正在寻找相同的解决方案并偶然发现了edge.js。它可以从任何 .NET 4.5 应用程序运行并通过 Nuget 安装。它不需要安装 node.js，但你需要 node 来使用 NPM 安装 D3。确保package-lock.json该node_modules文件夹与运行时的文件位于同一目录中edge.js，或全局安装。我只是npm i d3-array从\edge文件夹内部运行，然后包含 *.json 和 *.js 文件，将它们设置为内容并复制到输出目录。然后它很简单：
class Program {
public static async Task Start(int[] someArray) {
var func = Edge.Func(@"
var d3 = require('d3-array')
return function (data, callback) {
callback(null, 'D3 says: ' + d3.min(data));
}
");
Console.WriteLine(await func(someArray));
}
static void Main(string[] args) {
Start(new int[] { 1, 2, 3, 4 }).Wait();
}
}
输出：D3 says: 1
注意：在 .Net7.2 中，我必须安装Edge.Js.BinariesNuGet 包才能在项目根目录中安装 edge 文件夹。Edge.Js软件包没有这样做，在 4.5 中它做到了。
于 2019-04-01T12:35:43.453 回答