Databases
StackOverflow2013
Postsdbo
POHow can I use an Angularjs filter within the html element of a d3 tooltip?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can I use an Angularjs filter within the html element of a d3 tooltip?
    primarykey
    data
    text
    <p>I have a web app that combines Angularjs and d3js. One of my directives called <code>dailyView</code> sets up a tooltip using a function <code>drawtooltip()</code> defined in a service called <code>cfg</code>. The directive code is similar to the following:</p> <pre><code>app.directive('dailyView', ['cfg', function (cfg) { return { restrict: 'E', link: function(scope, element, attrs) { scope.$watch('daily', function(newVal, oldVal) { if (!newVal) return; cfg.drawDaily(scope.daily[attrs.bus], element, attrs.bus); $('#sortable2').sortable({ start: scope.dragStart, update: scope.dragEnd }); cfg.drawTooltip(); }); } }; }]); </code></pre> <p>On the other hand, the <code>drawTooltip()</code> function is defined like:</p> <pre><code>app.factory('cfg', ['$window', '$rootScope', '$cookieStore', function($window, $rootScope, $cookieStore){ function drawTooltip(){ var tooltip = d3.select(".tooltip"); d3.selectAll(".myImage") .on("mousemove", function(d){ tooltip.transition().duration(100) .style("opacity", .9); tooltip.html('&lt;p&gt;{{"' + d.measure + '"|myLocationFilter}}&lt;/p&gt;') .style("left", (d3.event.pageX + 20) + "px") .style("top", (d3.event.pageY - 110) + "px"); }) .on("mouseout", function(d) { tooltip.transition().duration(200) .style("opacity", 0); }); } </code></pre> <p>My angular filter should transform the <code>d.measure</code> string into a descriptive text that changes based on the browser language. The problem is that my the filter is not recognized and my tooltip simply shows the following text (e.g. when the measure data bound to the element is the string "plug": {{"plug"|myLocationFilter}}.</p> <p>How can I inject my angular filter into the d3js html element?</p> <blockquote> <p>Note: <a href="https://stackoverflow.com/questions/20399336/how-do-i-use-angularjs-directives-in-generated-d3-html">This</a> is a fairly similar question that has not been answered yet.</p> <p>Edit 1: I've tried using $compile()(scope) in the directive, right after calling <code>cfg.drawtooltip()</code> but the angular filter did not work.</p> <p>Edit 2: After testing the multiple suggestions offered in the comments, it is clear that the problem lies in the use of the <code>html()</code> method of a d3 selection. Would it be possible to somehow wait until <code>$compile()</code> is processed and then use the outerHTML value of the resulting object?</p> </blockquote>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USJAC
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow can I use an Angularjs filter within the html element of a d3 tooltip?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POHow can I use an Angularjs filter within the html element of a d3 tooltip?
      1. USAdam Pearce
      1. VTFavorite
    3. VO
      singulars
      1. POHow can I use an Angularjs filter within the html element of a d3 tooltip?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COWhy not, instead of trying to make the text interpolated, evaluate it inside the d3 code?
      singulars
      1. POHow can I use an Angularjs filter within the html element of a d3 tooltip?
      1. USJeff Hubbard
    2. COhttp://docs.angularjs.org/api/ng.$compile
      singulars
      1. POHow can I use an Angularjs filter within the html element of a d3 tooltip?
      1. USAdam Pearce
    3. COHi Jeff, thanks for the suggestion. That would work, but I just want to know if it is possible to do what I have in mind.
      singulars
      1. POHow can I use an Angularjs filter within the html element of a d3 tooltip?
      1. USJAC
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload