Comment intégrer d3.js graphique en application en C#?

Je suis un grand fan de Mike Bostock de l'd3.js le graphique de la bibliothèque: d3js.org.

Je voudrais l'utiliser pour afficher des graphiques en C# .Net application, mais je ne sais pas si c'est possible.

Il peut être possible par la génération de HTML+JS codes et rendu dans un webbrowser fenêtre.
Cependant, j'ai compris d3.js la bibliothèque ne peut pas être utilisé localement, sans un serveur web (Cependant je n'ai pas compris ce qui fonctionne sans serveur et ce que nécessite un serveur web), donc une solution simple ne fonctionne pas.

Personne n'a essayé de développer ce genre de déploiement de d3.js les graphiques?
Avez-vous une idée sur où commencer, afin d'avoir la solution la plus simple?

InformationsquelleAutor bobby | 2012-08-26
  1. 14

    Un serveur web n'est certainement pas nécessaire d'utiliser une bibliothèque JavaScript côté client comme d3.js.

    Pour C#, vous aurez besoin d'incorporer un contrôle de navigateur web (dans les deux WindowsForms ou WPF).

    Vous aurez besoin pour vous assurer que le navigateur fonctionne en mode Normes IE9, comme indiqué ici.

    Créer vos pages web comme vous le feriez normalement. Naviguer à l'aide de la webbrowser.naviguer (comme simplement des fichiers sur le système de fichiers.)

    Cela devrait fonctionner.

    • Salut. Merci beaucoup pour votre réponse. En fait, il peut fonctionner sans un serveur web. Il y a toutefois des limitations quand j'ai besoin d'importer des données à partir de fichiers externes au format json ou au format csv. J'ai besoin de trouver un moyen de faire fonctionner localement.
    • Je ne comprends pas votre question. Intégré navigateurs web sont autorisés à lire les fichiers à partir du système de fichiers.
    • D3 charge les fichiers via XMLHttpRequest, qui est empêché dans les navigateurs modernes de chargement de fichiers locaux. La seule solution que j'ai trouvé est d'avoir mon app écrire les données dans un .fichier javascript (json) et ensuite inclure ce fichier dans mon d3 page html avec l'un <script> tag.
    • D3 n'a pas besoin d'être à toutes les personnes impliquées avec le chargement du fichier. Ce n'est pas une opiniâtre de la bibliothèque que les forces de méthode particulière. Si vous avez créé un local intégré de l'application, il est facile en C# pour créer un petit serveur web intégré si c'est nécessaire pour une expérience complète.
    InformationsquelleAutor WiredPrairie
  2. 8

    Necromancing.

    Vous pouvez le faire avec C# et .NET-de Base sur tous les systèmes d'exploitation à l'aide de nodeJS.

    Absolument aucun navigateur de contrôle requis.

    Il suffit d'installer JavaScript-Les Services De avec nuget, puis installer d3, jsdom et svg2png en nodejs:

    npm install –save svg2png
npm install –save jsdom
npm install –save d3

    puis dans Démarrage.cs, ajoutez NodeServices dans ConfigureServices

    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 
      });
}

    Ajouter une sortie gestionnaire:

    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");
}

    Puis ajouter le 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));
}

    Qui devrait vous donner une le nécessaire d3-graphique sans avoir besoin d'un svg-navigateur compatible.

    Vous pourriez avoir besoin de mettre à jour mnp avant que vous pouvez (avec succès) installer un nodeJS modules.

    npm install -g npm

    Vous pouvez aussi faire cela dans une application de ligne de commande, juste que vous avez besoin pour configurer votre propre DI contrainer.

    • Ce genre de vitesse de rendu attendez-vous de ce sur un décent de bureau? Est la vitesse de rendu suffisant pour accueillir des graphiques interactifs de cette façon - passer les coordonnées de la souris sur le nœud et le laisser rendu à >30fps?
    • Auto Réponse: Trouvé ce qui indique un svg2png vitesse de rendu autour de 2 ou 3 secondes, ce qui ne serait pas adapté à l'interaction (et aussi trop lent par rapport à un accueilli navigateur)
    • Amour: Vous avez seulement besoin de l'PNG lorsque vous ne pouvez pas afficher du SVG pour le navigateur, c'est-à-dire pour IE <= 8, qui devrait être éteinte par maintenant. Vous pouvez également rendre les SVG en png avec C#, si vous trouver un convertisseur, qui vous a le plus susceptible de ne pas.
    InformationsquelleAutor Stefan Steiger
  3. 0

    Était à la recherche pour la même solution et je suis tombé sur edge.js. Il peut être exécuté à partir de n'importe quel .NET 4.5 application et installé via Nuget. Il ne nécessite pas node.js installé, mais vous aurez besoin de nœud pour installer D3 à l'aide de MNP. Assurez-vous que package-lock.json et la node_modules dossier est dans le même répertoire que le edge.js fichier lors de l'exécution, ou installé à l'échelle mondiale.
    J'ai juste couru npm i d3-array de l'intérieur de la \edge dossier, puis inclus l' *.json et *.js fichiers, les mettre à contenu et le copier vers le répertoire de sortie. Ensuite ses aussi simple que:

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

    Sorties: D3 says: 1

    REMARQUE: Dans .Net7.2 j'ai dû installer le Edge.Js.Binaries NuGet package pour installer le bord de dossier dans la racine du projet. Le Edge.Js paquet n'a pas fait cela, en 4.5 il n'.

    InformationsquelleAutor maeneak