我可以使用d3.js在android应用程序内部创build交互式可视化吗?

我正在尝试在android应用程序中创build交互式可视化

将被可视化的数据将被本地存储在一个sqlite数据库中

并将被查询以生成可视化。

我还没有决定是build立一个本地应用程序还是一个networking应用程序。

基于我的研究d3.js似乎很适合需求,但我不确定如何

在移动环境中使用它。

Solutions Collecting From Web of "我可以使用d3.js在android应用程序内部创build交互式可视化吗?"

您可以使用WebView组件轻松地将Javascriptembedded到Android应用程序中,也可以使用PhoneGap或类似的平台。 不幸的是,在Android 3.0之前,原生的Android浏览器没有显示SVG,而D3是基于SVG的,所以它在android 2.3(或者以下)浏览器中不起作用。 它在Firefox浏览器中工作。

另一个select是在WebView或电话间隙中使用InfoVis Toolkit 。 InfoVis Toolkit似乎在Android上效果更好。

我不知道一个类似的Android可视化平台,但D3,它的前辈Protovis,Flare和Prefuse都是开源的。 也许你可以尝试将其中的一个移植到Android上。

这里有一个相关的问题: 移动可视化工具(平板电脑)

按照本教程,我得到了D3在我的Android应用上工作。 从那里,很容易扩展教程的代码,以适应我的需求。

这里是一个稍微修改版本的教程(我添加了缩放控件和缩放):

  1. 创build一个JS资产文件夹(ProjectName / app / src / main / assets / js)
  2. 下载D3( https://d3js.org/ )并将缩小的d3.min.js源文件复制到ProjectName / app / src / main / assets / js
  3. 为HTML资源创build一个目录:(ProjectName / app / src / main / assets / html)
  4. 创build文件ProjectName / app / src / main / assets / html / graph.html。 将此代码复制到新文件中:
<html> <head> <script type="text/javascript" src="file:///android_asset/js/d3.min.js"></script> <script type="text/javascript" src="file:///android_asset/js/drawGraph.js"></script> <meta name="viewport" content="width=device-width, user-scalable=yes" /> </head> <body> <svg id="piechart"></svg> </body> </html> 
  1. 创build将运行D3的JS文件:ProjectName / app / src / main / assets / js / drawGraph.js。 将下面的代码添加到它:
 function initGraph(dataset, pHeight, pWidth) { var height = parseInt(pHeight); var width = parseInt(pWidth); var svg = d3.select("#piechart"); var textLabelSuffix = "%"; showPieChart(dataset, svg, height, width, textLabelSuffix); } function showPieChart(dataset, svg, height, width, textLabelSuffix) { var outerRadius = width / 2; var innerRadius = 0; // set height/width to match the SVG element svg.attr("height", height).attr("width", width); // create a new pie layout var pie = d3.layout.pie(); // initialize arcs/wedges to span // the radius of the circle var arc = d3.svg.arc() .innerRadius(innerRadius) .outerRadius(outerRadius); // create groups var arcs = svg.selectAll("g.arc") // bind dataset to pie layout .data(pie(dataset)) // create groups .enter() // append groups .append("g") // create arcs .attr("class", "arc") // position each arc in the pie layout .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")"); // initialize color scale - refer to // https://github.com/mbostock/d3/wiki/Ordinal-Scales var color = d3.scale.category10(); arcs.append("path") .attr("fill", function(d,i) { return color(i); }) .attr("d", arc); arcs.append("text") .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; }) .attr("text-anchor", "middle") .text(function(d) { return d.value + textLabelSuffix; }); } 
  1. 创build一个将托pipeD3代码的活动布局:
 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <WebView android:id="@+id/webview" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@id/tvOutgoing" android:layout_alignParentBottom="true"/> </RelativeLayout> 
  1. 在您的活动中初始化webview:

 public class VisualizationActivity extends AppCompatActivity { 

public class VisualizationActivity extends AppCompatActivity {

 private WebView webview; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_visualization); // Prepare webview: add zoom controls and start zoomed out webview = (WebView) findViewById(R.id.webview); final WebSettings webSettings = webview.getSettings(); webSettings.setJavaScriptEnabled(true); webSettings.setBuiltInZoomControls(true); webSettings.setSupportZoom(true); webSettings.setUseWideViewPort(true); webview.setWebChromeClient(new WebChromeClient()); webview.setInitialScale(1); webview.setWebViewClient(new WebViewClient() { @Override public void onPageFinished(WebView view, String url) { // after the HTML page loads, run JS to initialize graph int dataset[] = new int[] {5,10,15,20,35}; String text = Arrays.toString(dataset); webview.loadUrl("javascript:initGraph(" + text + ", " (webview.getHeight()) + ", " + (webview.getWidth()) + ")"); } }); // Load base html from the assets directory webview.loadUrl("file:///android_asset/html/graph.html"); } 

}

据我所知,Android应用程序只有Java。 所以要使用D3,你需要一个Java的JavaScript引擎/包装(如犀牛,或明显的PhoneGap ),或者只是一个HTML5应用程序(而不是一个Android应用程序)。

这个关于PhoneGap的链接似乎是关于从HTML5生成一个应用程序,但是你需要检查你可以包括任意的额外的库。

它必须是一个应用程序? D3更适合编写HTML5网站而不是应用程序。

您好,我有一个问题,使用D3,C3和phonegap渲染可安装应用程序的graphics。 问题是,如果你试图执行c3.generate它将在浏览器上正常工作,但不是在可安装的应用程序,解决scheme是编写自己的指令,并在其中使用C3。

希望这有助于某人。