blocks|key|274691|text|web服务器绝对不需要使用像d3.js这样的客户端JavaScript库。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|274692|对于C#，您需要嵌入一个web浏览器控件(在WindowsForms或WPF中)。|274693|您需要确保浏览器在here所示的IE9标准模式下工作。|offset|length|274694|像平常一样创建你的网页。使用webbrowser.navigate导航到它们(作为文件系统上的文件)。|274695|这应该是可行的。|274696|entityMap|0|LINK|mutability|MUTABLE|url|http://www.wiredprairie.us/blog/index.php/archives/1720^0|0|0|9|4|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@$F|W|G|X|1|Y]]|A|$]]|$1|H|3|I|5|6|7|Z|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|10|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|S]]]]

A web server definitely isn't required to use a client side JavaScript library like d3.js.

For C#, you'll need to embed a web browser control (in either WindowsForms or WPF).

You'll need to make sure that the browser is working in IE9 Standards mode as shown <a href="http://www.wiredprairie.us/blog/index.php/archives/1720" rel="noreferrer">here</a>.

Create your web pages as you would normally. Navigate to them using webbrowser.navigate (as just files on the file system.)

This should work.

blocks|key|274756|text|亡灵法术。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|274757|在所有使用nodeJS的操作系统上，您都可以使用C#和.NET-Core来实现这一点。|274758|绝对不需要浏览器控件。|274759|只需使用nuget安装JavaScript-Services，然后在nodejs中安装d3、jsdom和svg2png：|offset|length|274760|npm+install+–save+svg2png
npm+install+–save+jsdom
npm+install+–save+d3|code-block|syntax|javascript|274761|然后在Startup.cs中，在ConfigureServices中添加NodeServices|274762|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+
++++++});
}|274763|添加输出处理程序：|274764|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="""+%2B+markup+%2B+@"""+/>
</body>
</html>";

++++return+Content(html,+"text/html");
}|274765|然后添加JavaScript|274766|//+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+=+%2Bsvg.attr("width"),
++++height+=+%2Bsvg.attr("height"),
++++radius+=+Math.min(width,+height)+/+2,
++++g+=+svg.append("g").attr("transform",+"translate("+%2B+width+/+2+%2B+","+%2B+height+/+2+%2B+")");



++++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("+%2B+label.centroid(d)+%2B+")";
++++++++})
++++++++.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%2Bxml;base64,'+%2B+Buffer.from(svgText).toString('base64'));


++++svg2png(Buffer.from(svgText),+{+width:+width,+height:+height+})
++++++++.then(buffer+=>+'data:image/png;base64,'+%2B+buffer.toString('base64')+)
++++++++.then(buffer+=>+callback(null,+buffer));

}|274767|这将为您提供所需的d3图表，而不需要兼容svg的浏览器。|274768|您可能需要更新npm，然后才能(成功)安装任何nodeJS模块。|274769|npm+install+-g+npm|274770|您也可以在命令行应用程序中执行此操作，然后您需要设置自己的DI+contrainer。|274771|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/aspnet/JavaScriptServices^0|0|0|0|B|J|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1G|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1H|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1I|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|1J|8|@]|9|@$H|1K|I|1L|1|1M]]|A|$]]|$1|J|3|K|5|L|7|1N|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|1O|8|@]|9|@]|A|$]]|$1|Q|3|R|5|L|7|1P|8|@]|9|@]|A|$M|N]]|$1|S|3|T|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|U|3|V|5|L|7|1R|8|@]|9|@]|A|$M|N]]|$1|W|3|X|5|6|7|1S|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|L|7|1T|8|@]|9|@]|A|$M|N]]|$1|10|3|11|5|6|7|1U|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|1V|8|@]|9|@]|A|$]]|$1|14|3|15|5|L|7|1W|8|@]|9|@]|A|$M|N]]|$1|16|3|17|5|6|7|1X|8|@]|9|@]|A|$]]|$1|18|3|-4|5|6|7|1Y|8|@]|9|@]|A|$]]]|19|$1A|$5|1B|1C|1D|A|$1E|1F]]]]

Necromancing. 

You can do this with C# and .NET-Core on all operating systems using nodeJS. 
Absolutely no browser-control required. 
Just install <a href="https://github.com/aspnet/JavaScriptServices" rel="nofollow noreferrer">JavaScript-Services</a> with nuget, then install d3, jsdom and svg2png in nodejs:

<pre><code>npm install –save svg2png
npm install –save jsdom
npm install –save d3
</code></pre>

then in Startup.cs, add NodeServices in ConfigureServices

<pre><code>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 =&gt; {
 // options.DebuggingPort 
 });
}
</code></pre>

Add an output handler:

<pre><code>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&lt;IActionResult&gt; 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&lt;AgeInfo&gt; ls = new List&lt;AgeInfo&gt;();
 ls.Add( new AgeInfo("&lt;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&lt;string&gt;("Node/d3Pie.js", options, data);

 string markup = await nodeServices.InvokeAsync&lt;string&gt;("Node/d3chart.js", options, ls);

 string html = @"&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;&lt;meta charset=""utf-8"" /&gt;
&lt;style type=""text/css""&gt;
.arc text 
{
 font: 10px sans-serif;
 text-anchor: middle;
}
.arc path 
{
 stroke: #fff;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;img src=""" + markup + @""" /&gt;
&lt;/body&gt;
&lt;/html&gt;";

 return Content(html, "text/html");
}
</code></pre>

And then add the JavaScript

<pre><code>// 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('&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8" /&gt;&lt;/head&gt;&lt;body&gt;&lt;svg width="960" height="500"&gt;&lt;/svg&gt;&lt;/body&gt;&lt;/html&gt;');
 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: "&lt;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 =&gt; 'data:image/png;base64,' + buffer.toString('base64') )
 .then(buffer =&gt; callback(null, buffer));

}
</code></pre>

That should give you a the required d3-chart without needing a svg-compatible browser. 

You might need to update npm before you can (successfully) install any nodeJS modules.

<pre><code>npm install -g npm
</code></pre>

You can also do this in a command-line application, just that then you need to set up your own DI contrainer.

blocks|key|491865|text|也在寻找同样的解决方案，结果偶然发现了edge.js。它可以从任何.NET+4.5应用程序运行，并通过Nuget安装。它不需要安装node.js，但您需要使用NPM来安装D3。确保package-lock.json和node_modules文件夹在运行时与edge.js文件位于同一目录中，或者是全局安装的。我只是从\edge文件夹中运行npm+i+d3-array，然后包含*.json和*.js文件，将它们设置为content并复制到输出目录。然后它就像这样简单：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|491866|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:+'+%2B+d3.min(data));
++++++++++++}
++++++++");
++++++++Console.WriteLine(await+func(someArray));
++++}

++++static+void+Main(string[]+args)+{
++++++++Start(new+int[]+{+1,+2,+3,+4+}).Wait();
++++}
}+|code-block|syntax|javascript|491867|输出：D3+says:+1|491868|注意:在.Net7.2中，我必须安装Edge.Js.Binaries+NuGet包才能在项目根目录中安装边缘文件夹。Edge.Js包没有做到这一点，在4.5中做到了这一点。|491869|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/tjanczuk/edge#scripting-nodejs-from-clr^0|2I|H|30|C|3K|7|4E|5|4P|E|J|7|0|0|0|3|A|0|I|G|1M|7|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]|$9|11|A|12|B|C]|$9|13|A|14|B|C]|$9|15|A|16|B|C]]|D|@$9|17|A|18|1|19]]|E|$]]|$1|F|3|G|5|H|7|1A|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1B|8|@$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|1E|8|@$9|1F|A|1G|B|C]|$9|1H|A|1I|B|C]]|D|@]|E|$]]|$1|O|3|-4|5|6|7|1J|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

Was looking for the same solution and stumbled on <a href="https://github.com/tjanczuk/edge#scripting-nodejs-from-clr" rel="nofollow noreferrer">edge.js</a>. It can be run from any .NET 4.5 application and installed via Nuget. It doesn't require node.js installed but you will need node to install D3 using NPM. Make sure <code>package-lock.json</code> and the <code>node_modules</code> folder is in the same directory as the <code>edge.js</code> file at runtime, or installed globally. 
I just ran <code>npm i d3-array</code> from inside the <code>\edge</code> folder, then included the *.json and *.js files, set them to content and copy to output directory. Then its as simple as:

<pre><code>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();
 }
} 
</code></pre>

Outputs: <code>D3 says: 1</code>

NOTE: In .Net7.2 i had to install the <code>Edge.Js.Binaries</code> NuGet package to install the edge folder in the project root. The <code>Edge.Js</code> package didn't do this, in 4.5 it did.

I am a big fan of Mike Bostock's d3.js chart library: d3js.org.

I would like to use it to display charts in a C# .Net application, but I don't know if it is possible.

It may be possible by generating HTM+JS codes and rendering it in a webbrowser window.
However, I understood d3.js library cannot be used locally without a webserver (However I did not understood what works without a webserver and what requires a webserver), therefore a simple solution does not work. 

Has anybody tried to develop that kind of deployment of d3.js charts?
Do you have an idea on where to start in order to have the most simple solution?

How to integrate d3.js chart in C# application?

我是Mike Bostock的d3.js图表库d3js.org的铁杆粉丝。我想用它在C# .Net应用程序中显示图表，但我不知道这是否可行。可以通过生成HTM+JS代码并将其呈现在may浏览器窗口中来实现。然而，我知道d3.js库不能在没有work服务器的情况下在本地使用(然而我不知道没有work服务器什么工作，什么需...

问如何在C#应用程序中集成d3.js图表？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在C#应用程序中集成d3.js图表？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在C#应用程序中集成d3.js图表？
EN