Question

I am trying to create an interactive visualization within an android app.

The data that will be visualized will be stored locally in a sqlite database and will be queried to generate visualizations.

我尚未决定是否建立本土的传望或网络。

根据我的研究结果,3.js似乎非常适合需求,但我对如何在流动环境中使用这种需要感到不舒服。

Answer 1

你可以很容易地将 Java写成一个使用网络电文部分的安乐器,或可以使用电话交换或类似的平台。不幸的是,在安的3.0之前,本土和海底的浏览器没有显示微粒,D3则基于特别分类,因此不会在roid2.3(或以下)浏览器中工作。然而,它确实在Embrowser工作。

Another option would be to use InfoVis Toolkit in a WebView or in phone gap. InfoVis Toolkit seems to work better on Android.

我不了解一个类似的丝网图像平台,但D3及其前身Protovis、Flare和Prefuse都是公开来源。也许你可以尝试把其中一人赶到安乐。

Here is a related question: visualization tool for mobile (tablet)

Answer 2

I got D3 to work on my Android app by following this tutorial. From there, it was easy to extend the tutorial s code to fit my needs.

这里略微修改了教学法(我增加了动物群控制和扩大):

Create a JS assets folder (ProjectName/app/src/main/assets/js)
Download D3 (https://d3js.org/) and copy the minified d3.min.js source file into ProjectName/app/src/main/assets/js
Create a directory for HTML assets: (ProjectName/app/src/main/assets/html)
Create file ProjectName/app/src/main/assets/html/graph.html. Copy this code into the new file:

<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>

Create the JS file that will run D3: ProjectName/app/src/main/assets/js/drawGraph.js. Add the following code to it:

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

Create an activity layout that will host D3 code:

<?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>

Initialize the webview in your activity:


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


}

Answer 3

As far as I m aware, Android apps are java only. So to use d3, you would need either a java javascript engine/wrapper (like Rhino, or apparently PhoneGap) or to just make an HTML5 application (not an Android app as such).

电话联谊会的这种联系似乎涉及从超文本5中生成一台信号器,但需要检查你可以包括任意的附加库。

Does it have to be an app? D3 is better suited to writing an HTML5 site rather than an app.

Answer 4

Hi I had an issue of rendering the graph on the installable app using D3, C3 along with phonegap. The issue was if you try to execute c3.generate it will work fine on the browser but not on the installable app, solution is to write your own directive and use C3 inside it.

希望有助于人们。

Answer 5

各位同我一样,试图学习如何通过这里的参考理论将D3列入安文,是目前D3版本V5的D3Pie图的js代码。

function loadPieChart(dataset) {
      var svg = d3.select("#piechart");
      var height = 500;
      var width = 500;
      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.pie();

      // initialize arcs/wedges to span
      // the radius of the circle
      var arc = d3.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
      // <a href="https://github.com/mbostock/d3/wiki/Ordinal-Scales" target="_blank">https://github.com/mbostock/d3/wiki/Ordinal-Scales</a>
      var color = d3.scaleOrdinal(d3.schemeAccent);



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

友情链接