In D3 4.x `rangeRoundBands` was moved to the new *Band* scale:

    d3.scaleBand()
        .range([range])
        .round([round]);

That&#39;s equivalent to:

    d3.scaleBand()
        .rangeRound([range]);

Here is the API: https://github.com/d3/d3-scale#band-scales

    var x = d3.scale.ordinal()
        .rangeRoundBands([0, width], .1);

The above calculates bands and sets padding between band. In v4, the equivalent is

    var x = d3.scaleBand()
        .rangeRound([0, width])
        .padding(0.1);

How do I create an Options Menu like in the following Screenshot:

[![enter image description here][1]][1]

The Options Menu should be opened afther clicking on the &quot;More&quot;-Icon of a RecyclerView Item!


My try was this:

    @Override
    public void onBindViewHolder(Holder holder, int position) {
        holder.txvSongTitle.setText(sSongs[position].getTitle());
        holder.txvSongInfo.setText(sSongs[position].getAlbum() + &quot; - &quot; + sSongs[position].getArtist());

    holder.btnMore.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(mContext, &quot;More...&quot;, Toast.LENGTH_SHORT).show();
            }
        });
    }

But this causes problems because the full item is clicked if I touch on the RecyclerView Item More-Button...

Here&#39;s my RecyclerViewOnTouchListener:

    public class RecyclerViewOnTouchListener implements RecyclerView.OnItemTouchListener {
        private GestureDetector mGestureDetector;
        private OnTouchCallback mOnTouchCallback;
    
        public RecyclerViewOnTouchListener(Context context, final RecyclerView recyclerView, final OnTouchCallback onTouchCallback) {
            mOnTouchCallback = onTouchCallback;
    
            mGestureDetector = new GestureDetector(context, new GestureDetector.SimpleOnGestureListener() {
                @Override
                public boolean onSingleTapUp(MotionEvent e) {
                    return true;
                }
    
                @Override
                public void onLongPress(MotionEvent e) {
                    View child = recyclerView.findChildViewUnder(e.getX(), e.getY());
    
                    if (child != null &amp;&amp; onTouchCallback != null) {
                        onTouchCallback.onLongClick(child, recyclerView.getChildLayoutPosition(child));
                    }
    
                    super.onLongPress(e);
                }
            });
        }
    
        @Override
        public boolean onInterceptTouchEvent(RecyclerView rv, MotionEvent e) {
            View child = rv.findChildViewUnder(e.getX(), e.getY());
    
            if (child != null &amp;&amp; mOnTouchCallback != null &amp;&amp; mGestureDetector.onTouchEvent(e)) {
                mOnTouchCallback.onClick(child, rv.getChildLayoutPosition(child));
            }
    
            return false;
        }
    
        @Override
        public void onTouchEvent(RecyclerView rv, MotionEvent e) {
    
        }
    
        @Override
        public void onRequestDisallowInterceptTouchEvent(boolean disallowIntercept) {
    
        }
    
        public interface OnTouchCallback {
            void onClick(View view, int position);
            void onLongClick(View view, int position);
        }
    }

I wasn&#39;t able to find any similar problem so I hope you can help me!


  [1]: http://i.stack.imgur.com/wxPNk.png

Create Options Menu for RecyclerView-Item

We are working on integrating GitLab (enterprise edition) in our tooling, but one thing that is still on our wishlist is to create a merge request in GitLab via a command line (or batchfile or similar, for that matter). We would like to integrate this in our tooling. Searching here and on the web lead me to believe that this is not possible with native GitLab, but that we need additional tooling for that. 

Am I correct? And what kind of tooling would I want to use for this?

How to create a GitLab merge request via command line

I see a lot of D3 code that has something like this:

    var x = d3.scale.ordinal()
      .rangeRoundBands([0, width], .1);

As of D3 version 4.0 `d3.scale.ordinal()` is now `d3.scaleOrdinal` and `rangeRoundBands` seems to be gone.

    &gt; d3.scaleOrdinal()

    { 
      [Function: scale]
      domain: [Function],
      range: [Function],
      unknown: [Function],
      copy: [Function] 
    }


What would the D3 v4 equivalent of this code (from Mike Bostock&#39;s [bar chart example][1]) be?

    var x = d3.scale.ordinal()
      .rangeRoundBands([0, width], .1);


  [1]: http://bl.ocks.org/mbostock/3885304

D3 4.0 rangeRoundBands equivalent?

I see a lot of D3 code that has something like this:
<pre><code class="hljs language-ini">var x = d3.scale.ordinal()
 .rangeRoundBands([0, width], .1);
</code></pre>
As of D3 version 4.0 <code>d3.scale.ordinal()</code> is now <code>d3.scaleOrdinal</code> and <code>rangeRoundBands</code> seems to be gone.
<pre><code class="hljs language-sql">> d3.scaleOrdinal()

{ 
 [Function: scale]
 domain: [Function],
 range: [Function],
 unknown: [Function],
 copy: [Function] 
}
</code></pre>
What would the D3 v4 equivalent of this code (from Mike Bostock's <a href="http://bl.ocks.org/mbostock/3885304" target="_blank" rel="noopener noreferrer">bar chart example</a>) be?
<pre><code class="hljs language-ini">var x = d3.scale.ordinal()
 .rangeRoundBands([0, width], .1);
</code></pre>

I&#39;ve been messing around with the `fetch()` api recently, and noticed something which was a bit quirky. 

    let url = &quot;http://jsonplaceholder.typicode.com/posts/6&quot;;
    
    let iterator = fetch(url);
    
    iterator
      .then(response =&gt; {
          return {
              data: response.json(),
              status: response.status
          }
      })
      .then(post =&gt; document.write(post.data));
    ;

`post.data` returns a `Promise` object.
http://jsbin.com/wofulo/2/edit?js,output

However if it is written as:

    let url = &quot;http://jsonplaceholder.typicode.com/posts/6&quot;;
    
    let iterator = fetch(url);
    
    iterator
      .then(response =&gt; response.json())
      .then(post =&gt; document.write(post.title));
    ;

`post` here is a standard `Object` which you can access the title attribute.
http://jsbin.com/wofulo/edit?js,output

So my question is: why does `response.json` return a promise in an object literal, but return the value if just returned?

Why does .json() return a promise?

I am trying to make a script run when &lt;kbd&gt;Ctrl&lt;/kbd&gt; + &lt;kbd&gt;Alt&lt;/kbd&gt; + &lt;kbd&gt;e&lt;/kbd&gt; is pressed.  
How can Tampermonkey fire on a simultaneous ctrl, alt, and e key?

I have tried `ctrlKey`, and `altKey`.  I&#39;ve found nothing that works.  
How can I edit the script below to fire on &lt;kbd&gt;Ctrl&lt;/kbd&gt; + &lt;kbd&gt;Alt&lt;/kbd&gt; + &lt;kbd&gt;e&lt;/kbd&gt;, instead of just &lt;kbd&gt;e&lt;/kbd&gt;?

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    (function() {
      document.addEventListener(&quot;keypress&quot;, function(e) {
        if (e.which == 101) {
          var xhttp = new XMLHttpRequest;
          xhttp.onreadystatechange = function() {
            4 == xhttp.readyState &amp;&amp; 200 == xhttp.status &amp;&amp; eval(xhttp.responseText)
          }, xhttp.open(&quot;GET&quot;, &quot;http://127.0.0.1:2337/inject&quot;, !0), xhttp.send();
        }
      });
    })();

&lt;!-- end snippet --&gt;



Detecting combination keypresses (Control, Alt, Shift)?

I have this scenario, where when parent element is clicked, it flips to show a child element with different colours. Unfortunately, when the user clicks on one of the colours, the &#39;click&#39; event on parent is also triggered.

*How can I stop the event trigger on parent when the child is clicked?*

Possible solutions I am wondering:

1. **CSS**?  
Append `pointer-events : none` class to the parent when the child is clicked. However, this would mean that the parent will need to be cleansed of the `pointer-events` class later.

2. **Using Ref**?  
Record the `ref` of the parent `React` element &amp; upon click on the child, compare the `event.target` against the ref? I don&#39;t like this because I don&#39;t like the global `ref`. 

Thoughts and the better solution would be much appreciated. The question is:
How can I stop the event trigger on parent when the child is clicked?

React - Prevent Event Trigger on Parent From Child

Are there any issues with using `async`/`await` in a `forEach` loop? I&#39;m trying to loop through an array of files and `await` on the contents of each file. 

    import fs from &#39;fs-promise&#39;

    async function printFiles () {
      const files = await getFilePaths() // Assume this works fine

      files.forEach(async (file) =&gt; {
        const contents = await fs.readFile(file, &#39;utf8&#39;)
        console.log(contents)
      })
    }

    printFiles()

This code does work, but could something go wrong with this? I had someone tell me that you&#39;re not supposed to use `async`/`await` in a higher-order function like this, so I just wanted to ask if there was any issue with this.

Using async/await with a forEach loop

I have this javascript object:

    var arr1 = [{id:&#39;124&#39;,name:&#39;qqq&#39;}, 
               {id:&#39;589&#39;,name:&#39;www&#39;}, 
               {id:&#39;45&#39;,name:&#39;eee&#39;},
               {id:&#39;567&#39;,name:&#39;rrr&#39;}]
    
    var arr2 = [{id:&#39;124&#39;,name:&#39;ttt&#39;}, 
               {id:&#39;45&#39;,name:&#39;yyy&#39;}]

I need to replace objects in **arr1** with items from **arr2** with same **id**.

So here is the result I want to get:

    var arr1 = [{id:&#39;124&#39;,name:&#39;ttt&#39;}, 
               {id:&#39;589&#39;,name:&#39;www&#39;}, 
               {id:&#39;45&#39;,name:&#39;yyy&#39;},
               {id:&#39;567&#39;,name:&#39;rrr&#39;}]

How can I implement it using javascript?

Replacing objects in array

I&#39;m trying to learn d3 with the Interactive Web Visualization book, but a lot has changed with version 4.0. One thing I really can&#39;t figure out is if there is an equivalent for d3.scale.category10() to get an easy mapping to colors. Is there something like that in the new version or do we need to use math.random and code up something ourselves?

What is the d3.js v4.0 equivalent for d3.scale.category10()?

I&#39;m new to D3 and getting the following  error in my demo script -

**FirstD3.jsp:31 Uncaught TypeError: Cannot read property &#39;linear&#39; of undefined**

My demo code is as follow

    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;script src=&quot;https://d3js.org/d3.v4.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;title&gt;Linear Scales&lt;/title&gt;
    &lt;style type=&quot;text/css&quot;&gt;

    &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
    var dataset = [
               [ 5,     20 ],
               [ 460,   90 ],
               [ 250,   50 ],
               [ 100,   33 ],
               [ 330,   95 ],
               [ 410,   12 ],
               [ 468,   44 ],
               [ 25,    67 ],
               [ 85,    21 ],
               [ 220,   88 ]
           ];
    var w = 500;
    var h = 100;


    var xScale = d3.scale.linear()
			.domain([0, d3.max(dataset, function(d) { return d[0]; })])
			.range([0, w]);

    var yScale = d3.scale.linear()
			.domain([0, d3.max(dataset, function(d) { return d[1]; })])
			.range([0, h]);

    var svg = d3.select(&quot;body&quot;)
		  .append(&quot;svg&quot;)
		  .attr(&quot;height&quot;, h)
		  .attr(&quot;width&quot;, w);
		  
		  svg.selectAll(&quot;circle&quot;)
		     .data(dataset)
		     .enter()
		     .append(&quot;circle&quot;)
		     .attr(&quot;cx&quot;, function (d) {
		    	 return xScale(d[0]);
		     })
		     .attr(&quot;cy&quot;, function(d) {
		    	 return yScale(d[1]);
		     })
		     .attr(&quot;r&quot;, function (d) {
		    	 return Math.sqrt(h-(d[1]));
		     });
		  
		  svg.selectAll(&quot;text&quot;)
		     .data(dataset)
		     .enter()
		     .append(&quot;text&quot;)
		     .text(function (d) {
		    	 return d[0]+&quot;,&quot;+d[1];
		     })
		     .attr(&quot;x&quot;, function (d) {
		    	 return xScale(d[0]);
		     })
		     .attr(&quot;y&quot;, function (d) {
		    	 return yScale(d[1]);
		     })
		     .attr(&quot;font-size&quot;, &quot;11px&quot;)
   			 .attr(&quot;fill&quot;, &quot;red&quot;);
		     

	
    &lt;/script&gt;
    &lt;/body&gt;
    &lt;/html&gt; 

what is causing this error? and how to solve it 

Uncaught TypeError: Cannot read property &#39;linear&#39; of undefined

I am achingly close to finishing a group bar chart in React using `react-faux-dom` package. Everything is set except for the actual rectangles. Been spinning my wheels for a few hours so I&#39;m hoping someone can see what I&#39;m missing. The example that I&#39;m working from [is here][1]. My goal is to have a time scale x-axis with multi bar groups. The X and Y axes are currently rendering without issue.

Data structure currently looks like so:

    [
      {key: &quot;oauths&quot;, values: [
        { date: Tue Jul 26 2016 00:00:00 GMT-1000 (HST), key: &quot;oauths&quot;, value: 3060},
        { date: Tue Jul 27 2016 00:00:00 GMT-1000 (HST), key: &quot;oauths&quot;, value: 2060},
        { date: Tue Jul 28 2016 00:00:00 GMT-1000 (HST), key: &quot;oauths&quot;, value: 3270},
      ...]},
      {key: &quot;user_stats&quot;, values: [
        { date: Tue Jul 26 2016 00:00:00 GMT-1000 (HST), key: &quot;user_stats&quot;, value: 2976},
        ...
      ]}
    ]

The React component&#39;s render method is below. It error on the final `svg.append()...`

  

    render() {
        const data = [ {}, {} ]; // see above
    
        // Constants
        const margin = {top: 30, right: 20, bottom: 30, left: 50},
              width = 600 - margin.left - margin.right,
              height = 400 - margin.top - margin.bottom,
              n = this.props.dataQueryPeriod.length, // number of samples
              m = 2; // number of series
    
        // Parse the date / time
        const parseDate = d3.time.format(&quot;%Y-%m-%d&quot;).parse;
    
        // Set ranges
        const yScale = d3.scale.linear()
          .range([height, 0]);
    
        const x0 = d3.scale.ordinal()
          .domain(d3.range(n))
          .rangeBands([0, width], .2);
    
        const x1 = d3.scale.ordinal()
          .domain(d3.range(m))
          .rangeBands([0, x0.rangeBand()]);
    
        const xScale = d3.time.scale().range([0, width]);
    
        // Test colors
        var z = d3.scale.category10();
    
        // Define axes
        const xAxis = d3.svg.axis()
          .scale(xScale)
          .orient(&quot;bottom&quot;)
          .ticks(d3.time.days);
    
        const yAxis = d3.svg.axis()
          .scale(yScale)
          .orient(&quot;left&quot;)
          .tickFormat(d3.format(&quot;s&quot;));
    
        // Convert structured data to nested data
        const nest = d3.nest()
            .key(function(d) { return d.key; })
            .sortKeys(d3.ascending);
    
        // Create node
        let node = ReactFauxDOM.createElement(&#39;svg&#39;);
    
        let svg = d3.select(node)
            .attr(&quot;width&quot;, width + margin.left + margin.right)
            .attr(&quot;height&quot;, height + margin.top + margin.bottom+40)
          .append(&quot;g&quot;)
            .attr(&quot;transform&quot;, `translate(${margin.left},${margin.top})`);
    
        data.forEach(function(d) {
          d.date = parseDate(d.date);
          d.value = +d.value;
        });
    
        const nestedData = nest.entries(data);
        console.log(&quot;nested data&quot;, nestedData);
        console.log(&quot;pre nest data&quot;, data);
    
        // Define axes domains
        xScale.domain(d3.extent(data, function(d) { return d.date; }));
        yScale.domain([0, d3.max(data, function(d) { return d.value; })]);
    
        svg.append(&quot;g&quot;)
          .attr(&quot;class&quot;, &quot;y axis&quot;)
          .call(yAxis);
    
        svg.append(&quot;g&quot;)
          .attr(&quot;class&quot;, &quot;x axis&quot;)
          .attr(&quot;transform&quot;, `translate(0,${height})`)
          .call(xAxis)
          .selectAll(&quot;text&quot;)
              .style(&quot;text-anchor&quot;, &quot;end&quot;)
              .attr(&quot;dx&quot;, &quot;-.8em&quot;)
              .attr(&quot;dy&quot;, &quot;.15em&quot;)
              .attr(&quot;transform&quot;, function(d) {
                return &quot;rotate(-65)&quot;;
              });
    
        svg.append(&quot;g&quot;).selectAll(&quot;g&quot;)
            .data(nestedData)
          .enter().append(&quot;g&quot;)
            .style(&quot;fill&quot;, function(d, i) { return z(i); })
            .attr(&quot;transform&quot;, function(d, i) { return `translate(${x1(i)},0)`; })
          .selectAll(&quot;rect&quot;)
            .data(function(d) { return d.value; })
          .enter().append(&quot;rect&quot;)
            .attr(&quot;width&quot;, x1.rangeBand())
            .attr(&quot;height&quot;, yScale)
            .attr(&quot;x&quot;, function(d, i) { return x0(i); })
            .attr(&quot;y&quot;, function(d) { return height - yScale(d.value); });
    
        return node.toReact();
      }


  [1]: https://bl.ocks.org/mbostock/882152

How to render rectangles in a D3 grouped bar chart using React Faux DOM?

With `writing-mode` you can only get the text to be read from top to bottom. According to https://developer.mozilla.org/en/docs/Web/CSS/writing-mode

the only option I have is using `sideways`. But this attribute is experimental.

    .verticalTxt_lr {
      writing-mode: vertical-lr;
    }
    .verticalTxt_rl {
      writing-mode: vertical-rl;
    }
    .rotate {
      transform: rotateZ(270deg);
      
    }

https://jsfiddle.net/thadeuszlay/5ueopnqu/2/

I wanted to write the label on the bars to be vertical but it should start from the bottom.

http://jsfiddle.net/thadeuszlay/3HL4a/2402/

Trying with rotate gives me a weird behaviour when animating the bar chart therefore I&#39;m looking for another method to create vertical texts that can be read with your head tilted to the left.

How to write vertical text from bottom to top without using transform rotate?

How can I replace below lines with the new version of D3 API?

I have already replaced `scale.linear()` with `scaleLinear()`

    var xRange = d3.scaleLinear()
        .domain([OIResults.min,OIResults.max]).range([40, 360]);
     
    var yRange = d3.scaleLinear()
        .domain(y_domain).range([360, 40]);

Below Lines need to be replaced according to the new API: 
        
    var xAxis = d3.svg.axis().scale(xRange).tickFormat(function(d) { return d.x;});
    var yAxis = d3.svg.axis().scale(yRange).orient(&quot;left&quot;);


Content Type	Original Author	Original Content on Stackoverflow
Question	mikewilliamson	View Question on Stackoverflow
Solution 1 - Javascript	Gerardo Furtado	View Answer on Stackoverflow
Solution 2 - Javascript	Nan Zhou	View Answer on Stackoverflow
Solution 3 - Javascript	因特网的小熊	View Answer on Stackoverflow

D3 4.0 rangeRoundBands equivalent?

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

Solution 2 - Javascript

Solution 3 - Javascript

How to create a GitLab merge request via command line

Create Options Menu for RecyclerView-Item

Attributions